Как сделать фигурный div в css, используя свойство clip-path

Последнее бновение - 1 мая 2023 в 21:36

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

Вот пример создания фигурного div в виде круга:

div {
  width: 100px;
  height: 100px;
  background-color: red;
  border-radius: 50%;
  clip-path: circle(50%);
}

div {

width: 100px;

height: 100px;

background-color: red;

border-radius: 50%;

clip-path: circle(50%);

}

Здесь мы задали ширину и высоту div’а 100px, задали красный цвет фона, а также скругление границы в 50%, чтобы получился круг. Затем мы использовали свойство clip-path и функцию circle(), чтобы обрезать элемент по кругу.

Вы также можете создавать другие фигуры, используя различные значения в функции clip-path, например:

div {
  width: 100px;
  height: 100px;
  background-color: blue;
  clip-path: polygon(0 0, 100% 0, 100% 70%, 50% 100%, 0 70%);
}

div {

width: 100px;

height: 100px;

background-color: blue;

clip-path: polygon(0 0, 100% 0, 100% 70%, 50% 100%, 0 70%);

}

Здесь мы использовали функцию polygon(), чтобы создать многоугольник с пятью точками, задавая значения координат каждой точки. Результатом будет фигурный div в форме пятиугольника.

Далее я приведу пример HTML-кода для создания фигурного div в виде круга с помощью CSS:

<div class="circle"></div>

1	<div class="circle"></div>

А вот CSS-код для создания этого круга:

.circle {
  width: 200px;
  height: 200px;
  background-color: red;
  border-radius: 50%;
  clip-path: circle(50%);
}

.circle {

width: 200px;

height: 200px;

background-color: red;

border-radius: 50%;

clip-path: circle(50%);

}

Здесь мы задали ширину и высоту div’а 200px, задали красный цвет фона, а также скругление границы в 50%, чтобы получился круг. Затем мы использовали свойство clip-path и функцию circle(), чтобы обрезать элемент по кругу.

See the Pen
Untitled by Artem (@HoboBo)
on CodePen.

Теперь вы можете использовать этот код для создания круговых элементов на своей веб-странице.

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