Эффект загнутого уголка — простой и не бросающийся в глаза прием, который, тем не менее, может существенно оживить страницу. Выполнить его можно разными способами, попроще и посложнее. Самое главное здесь — внимание к мелочам (вроде теней) от которых зависит весь эффект.

Загнувшийся уголок

Сделаем с помощью CSS симпатичный и довольно реалистичный эффект загнувшегося уголка.
shadow
Нарисуем некий блок и зададим ему общие стили:

block
Для оформления угла воспользуемся двумя псевдоэлементами — :before станет непосредственно загнутым уголком, а невидимый :after будет отбрасывать красивую тень.
Вот так на данный момент выглядит наш уголок:

before
А вот так выглядел бы псевдоэлемент :after, если бы могли его видеть:

after
Теперь впишем уголок в родительский блок так, чтобы он казался его непосредственным продолжением с помощью закругленных углов:

borderradius
Дополняем картинку тенью от приподнятого угла:

Вам также будет интересно:

Треугольники на CSS

0 комментариев

Оставить комментарий

*Доступные HTML-теги: a, abbr, blockquote, code, pre, del, i, em, strong, b, strike
*Не будет опубликован