CSS – мощный инструмент для улучшения дизайна и визуальной привлекательности веб-страниц. Один из популярных приемов дизайна — создание изогнутых границ в верхней части элементов, придающих им уникальный и привлекательный вид. В этой статье мы рассмотрим несколько методов достижения этого эффекта с помощью CSS, а также приведем примеры кода для каждого метода.

Метод 1: свойство Border-radius
Самый простой и наиболее широко поддерживаемый метод создания изогнутой границы — использование свойства border-radius. Указав значение больше нуля, вы можете скруглить углы элемента. Чтобы создать кривую на верхней границе, вам нужно всего лишь установить значение border-radiusдля верхнего левого и верхнего правого углов.

.curve-top {
  border-radius: 0 0 50% 50%;
}

Метод 2: свойство Clip-path
Свойство clip-pathпозволяет определить область отсечения для элемента. Используя функцию polygon(), вы можете создать произвольную фигуру, включая изогнутые границы. Чтобы создать кривую на верхней границе, определите многоугольник с нужными точками кривой.

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

Метод 3: фоновое изображение SVG
Вы также можете добиться изогнутых границ, используя SVG в качестве фонового изображения для элемента. SVG предоставляет мощные возможности для создания сложных фигур. Используя элемент пути с изогнутым контуром, вы можете определить желаемую форму верхней границы.

.curve-top {
  background-image: url('curve.svg');
  background-repeat: no-repeat;
  background-position: top center;
}

Метод 4: псевдоэлементы
Другой подход — использовать псевдоэлементы ::beforeи ::afterдля создания эффекта изогнутой границы. Размещая и стилизуя эти псевдоэлементы, вы можете добиться изогнутой верхней границы.

.curve-top {
  position: relative;
}
.curve-top::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 50px;
  border-radius: 50% 50% 0 0;
  background-color: #000;
}