Как сделать красивый блок с помощью свойства clip-path — HRCode
Верстка элементов

Как сделать красивый блок с помощью свойства clip-path

Свойство CSS clip-path создает область, которая определяет, какая часть элемента должна отображаться. Части, которые находятся внутри области, показаны, а те, что снаружи, скрыты.

clip-path-sheme

Начало координат у clip-path – это верхний левый угол, ось x — направлена вправо, а ось y — направлена вниз.

Рассмотрим несколько фигур, которые можно быстро сделать с его помощью, эти фигуры помогут вам красиво оформить дизайн сайта.

Допустим у нас есть блок для которого вы уже задали размеры, цвет или фоновое изображение:

html

<div class="block"></div>

По умолчанию этот блок будет прямоугольным.

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

css

.block {
  clip-path: polygon(0 0, 100% 0, 100% 90%, 0 100%);
}

Чтобы сделать ромб, нужно добавить следующий код:

css

.block {
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}

Чтобы сделать круг, добавьте такой код:

css

.block {
  clip-path: circle(30% );
}

Вариантов здесь много, можно изменять любые стороны, делать треугольники, эллипсы, другие фигуры, все зависит от вашего дизайна и желания.
Также мы рассмотрели только базовые значения свойства clip-path, которые чаще всего применяются на практике, а у него есть и много других, которые можно использовать в разработке и с которыми можно познакомиться в соответствующей инструкции.
Удачи!

Еще по теме:

Напишите что нибудь:

Ваш адрес email не будет опубликован. Обязательные поля помечены *