Скошенные края блоков с помощью 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-х рабочих методов придания скошенных углов блокам.
Если данная статья была вам полезна или если у вас есть на примете другой рабочий метод для придания скошенности блокам, напишите об этом в комментариях ниже.
This post was last modified on 26/06/2017 18:31
Последние посты
Генри Форд
Человек имеет два мотива поведения — один настоящий и второй, который красиво звучит Генри Форд…
Фридрих Ницше
Не нужно додумывать слишком много. Так вы создаете проблемы, которых изначально не было Фридрих Ницше…
Такой разный инвертор! Выбираем между кондиционерами Inverter, Inverter DC и Full DC
Лето в разгаре, а значит самое время задуматься о покупке кондиционера. Но как не потеряться…
Омар Хайям
Настоящий друг — это человек, который в глаза тебе выскажет все, что о тебе думает,…
Полезные советы по выбору раздвижной двери
Следует знать, что функциональность и дизайн работают рука об руку, когда вы используете раздвижную дверь.…
View Comments
Спасибо за статью, ребята! Хороший пример