Свойство CSS clip-path создает область, которая определяет, какая часть элемента должна отображаться. Части, которые находятся внутри области, показаны, а те, что снаружи, скрыты.
Начало координат у clip-path – это верхний левый угол, ось x - направлена вправо, а ось y - направлена вниз.
Рассмотрим несколько фигур, которые можно быстро сделать с его помощью, эти фигуры помогут вам красиво оформить дизайн сайта.
Допустим у нас есть блок для которого вы уже задали размеры, цвет или фоновое изображение:
<div class="block"></div>
По умолчанию этот блок будет прямоугольным.
Чтобы сделать косой одну из его сторон, например нижнюю, нужно в стилях написать такой код:
.block {
clip-path: polygon(0 0, 100% 0, 100% 90%, 0 100%);
}
Чтобы сделать ромб, нужно добавить следующий код:
.block {
clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}
Чтобы сделать круг, добавьте такой код:
.block {
clip-path: circle(30% );
}
Вариантов здесь много, можно изменять любые стороны, делать треугольники, эллипсы, другие фигуры, все зависит от вашего дизайна и желания.
Также мы рассмотрели только базовые значения свойства clip-path, которые чаще всего применяются на практике, а у него есть и много других, которые можно использовать в разработке и с которыми можно познакомиться в соответствующей инструкции.
Удачи!
Kwork