От автора: в данной статье мы поговорим о трансформациях и масках css. Во время визуального просмотра страницы наклонные края элементов могут произвести впечатление. Хоть такой подход не распространен, но мы решили на использовать его на сайте The National Trust for Historic Preservation. К различным элементам мы применили различные наклонные края: где-то нижние края широкоформатных изображений, где-то нижние или верхние края блоков с текстом со сплошным фоном.
Пример 1: Изображение с нижним угловым краем и сплошной блок с верхним краем
Пример 2: Блок со сплошным фоном и нижним угловым краем
Пример 3: Блок со сплошным фоном и обеими угловыми краями
Эффект наклона в основном достигается с помощью CSS трансформаций за счет наклона одной из сторон родительского элемента и выравнивания дочернего элемента. Но данную технику можно применять только для параллельных углов. Что если нужно применить к отдельным сторонам свою трансформацию – только к одной стороне, к верхней и нижней граням с противоположными углами или к изображению? К счастью, есть пара способов.
CSS clip-path
Первый и самый простой способ это CSS clip-path. В качестве примера мы взяли большое баннерное изображение.
|
1 2 3 4 |
.hero-image__figure img { -webkit-clip-path: polygon(0 0, 100% 0, 100% 96%, 0 100%); clip-path: polygon(0 0, 100% 0, 100% 96%, 0 100%); } |
Так мы задали область обрезки изображения, фактически скрыв нижнюю грань под небольшим углом. На блоках с фоновым изображением также стоит свойство clip-path. В отличие от изображения, высота данного блока изменяется в отличие от размера экрана устройства. Чтобы поддерживать правильный угол на разных экранах (не слишком крутой) нужно прописать значения для каждой Х координаты для всех экранов.
|
1 2 3 4 |
.promo { -webkit-clip-path: polygon(0 0, 1600px 0, 1600px 87%, 0 100%); clip-path: polygon(0 0, 1600px 0, 1600px 87%, 0 100%); } |
В примере выше 1600px – максимальная ширина элемента.
Единственный недостаток у свойства clip-path это поддержка браузерами. На момент написания статьи свойство поддерживалось только в webkit браузерах. Firefox поддерживает, но только в сочетании с url.
CSS генерируемый контент
Второй вариант это наклон генерируемого контента. Такой подход замечательно работает с блоками со сплошным фоном.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
.quote { background: #41ade5; color: #fff; position: relative; z-index: 1; } .quote:after { background: inherit; bottom: 0; content: ''; display: block; height: 50%; left: 0; position: absolute; right: 0; transform: skewY(-1.5deg); transform-origin: 100%; z-index: -1; } |
К нижней грани блока добавляется псевдо-элемент. В качестве центра вращения указывается правый нижний угол, и элемент вращается на -1.5 градуса. Тем самым создается эффект наклонной грани. Для симуляции верхней наклонной грани лучше всего добавить еще один псевдо-элемент :before, установить в качестве точки вращения верхний правый угол и провернуть на 1.5 градуса.
Данный метод отлично поддерживается браузерами и хорошо работает со сплошными фонами благодаря свойству background: inherit.
Sass mixin для наклонный краев
Для большей гибкости мы создали умный Sass mixin, который позволяет делать наклонными верхний, нижний или оба края сразу, а также изменять точку вращения.
|
1 2 3 4 |
.block { background: #41ade5; @include angle(after); } |
В codepen демо ниже показан миксин.
Вот все и готово! Легкий генерируемый контент с наклонными гранями с помощью простого Sass миксина. Если вам понравился мой способ или вы знаете другой, пишите о нем в комментариях.
Автор: Jeremy Frank
Источник: //viget.com/
Редакция: Команда webformyself.
