Скошенные края блоков с помощью CSS-масок и трансформаций
С помощью угловатых, скошенных краев у различных html-элементов (картинок, блоков, целых секций) можно придать уникальный вид любой веб-странице. В этой статье мы рассмотрим практические примеры того, как легко можно добавить скошенные края любому html-элементу с помощью простых методик CSS-масок и CSS-трансформаций.
Чтобы создать углы для краев элементов с помощью CSS трансформаций обычно приходится «перекашивать» родительский элемент, а затем «отвязывать» дочерний элемент, но такой метод имеет ряд лишних ограничений. А что делать, если нужно применить более кастомизированный эффект: добавить скошенные углы только одному краю, например, только с правой стороны блока и от верхнего к нижнему краю? Оказывается, есть еще несколько способов для этого.
clip-path (маскирование, область отсечения) в CSS3
Первым и самым простым вариантом является использование CSS свойства clip-path
. Пример кода:
.img { display: block; position: relative; background: #1395ba; width: 500px; height: 250px; margin: 50px; -webkit-clip-path: polygon(0 0, 100% 0, 100% 90%, 0 100%); clip-path: polygon(0 0, 100% 0, 100% 90%, 0 100%); }
Этот код присваивает обтравочную маску блоку и фактически скрывает его нижний край под небольшим углом (10о). Это довольно простой и рабочий метод. Единственным недостатком для свойства clip-path
в CSS3 является поддержка браузерами. Полностью свойство поддерживает только Firefox, частично поддерживают Webkit-браузеры и полностью не поддерживают IE, Edge и Opera Mini.
Сгенерированный контент с помощью CSS3
Второй метод заключается в использовании сгенерированного (с помощью псевдоэлементов :after
и :before
) и перекошенного содержимого. Этот метод отлично работает на блоках со сплошным фоновым цветом.
Пример кода:
.block { background: #2499d5; position: relative; z-index: 1; width: 500px; height: 250px; margin: 50px; } .block:after { background: inherit; bottom: 0; content: ''; display: block; height: 50%; left: 0; position: absolute; right: 0; transform: skewY(-5deg); transform-origin: 100%; z-index: -1; }
В этом методе используется псевдоэлемент :after
, который в нижней части блока переносит точку поворота в правый угол и поворачивает созданный блок на -5 градусов, что позволяет добиться эффекта скошенного края.
Чтобы добавить еще один скошенный край в верхней части элемента, достаточно добавить псевдоэлемент :before
, перенеся его точку поворота в правый верхний угол и повернув блок на 5 градусов.
Пример кода:
.block:before { background: inherit; bottom: 0; content: ''; display: block; height: 50%; top: 0; position: relative; right: 0; transform: skewY(5deg); transform-origin: 100%; z-index: -1; }
Этот метод имеет лучшую за предыдущий метод поддержку браузерами, и отлично подходит для блоков с однотонным фоном.
Самый скучный метод
Ну и третий, самый скучный метод – это создание фоновых картинок с прорисованными углами. Но никто так уже не делает в XXI веке (шутка).
Демо-пример 2-х рабочих методов придания скошенных углов блокам.
Если данная статья была вам полезна или если у вас есть на примете другой рабочий метод для придания скошенности блокам, напишите об этом в комментариях ниже.
Последние посты
Как выбрать идеальный ноутбук: Полный гайд
Выбор ноутбука может быть сложной задачей в мире, где рынок переполнен вариантами на любой вкус… Читать далее
Томас Эдисон
Наша самая большая слабость заключается в том, что мы быстро сдаемся. Самый верный способ добиться… Читать далее
Самые красивые и впечатляющие мосты со всего мира (ТОП-10)
Мост — это нечто большее, чем просто сооружение, соединяющее два берега. Для того, чтобы появился… Читать далее
Соломон
Жизнь нас учит, что свою пару мы познаем, когда разводимся, своих братьев мы познаем, когда… Читать далее
Чак Паланик
Кто может — тот делает. Кто не может — тот критикует Чак Паланик Читать далее
Ричард Бах
Ни одно желание не дается тебе отдельно от силы, позволяющей его осуществить. Хотя, возможно, для… Читать далее