CSS Shapes и clip-path

clip-path обрезает видимую область элемента по заданной форме; CSS Shapes (shape-outside) управляет обтеканием текста вокруг нестандартных форм.

Зачем нужно

clip-path позволяет делать нетипичные формы без PNG-масок: многоугольники, круги, волны, диагональные секции. shape-outside даёт обтекание текстом вокруг круга или треугольника. Оба свойства дают дизайнерскую гибкость средствами чистого CSS.

Где используется

  • Диагональные секции лендингов
  • Аватары и изображения в форме круга или шестиугольника
  • Интерактивные hover-эффекты с изменением формы
  • Декоративные разделители секций
  • Обтекание текстом вокруг нестандартных изображений

Основной контент

clip-path — основные функции

/* circle */
.avatar {
  clip-path: circle(50%);
  clip-path: circle(40% at 50% 50%);
}

/* ellipse */
.oval {
  clip-path: ellipse(60% 40% at center);
}

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

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

/* Диагональная секция */
.section {
  clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
}

/* inset — прямоугольник с отступами */
.inset {
  clip-path: inset(10px 20px round 8px);
}

Анимация clip-path

.card {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  transition: clip-path 0.4s ease;
}

.card:hover {
  clip-path: polygon(5% 5%, 95% 5%, 95% 95%, 5% 95%);
}

/* Reveal-эффект */
@keyframes reveal {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0% 0 0); }
}

.reveal {
  animation: reveal 0.6s ease forwards;
}

path — SVG-пути

.custom-shape {
  clip-path: path('M 0 0 Q 50 100 100 0 L 100 100 L 0 100 Z');
}

shape-outside — обтекание текстом

/* Текст обтекает изображение по кругу */
.float-image {
  float: left;
  width: 200px;
  height: 200px;
  shape-outside: circle(50%);
  clip-path: circle(50%);
  margin: 0 16px 16px 0;
}

/* Обтекание по многоугольнику */
.float-shape {
  float: right;
  shape-outside: polygon(100% 0, 100% 100%, 0 100%);
  width: 200px;
  height: 200px;
}

Частые ошибки

  • clip-path обрезает overflow: visible — дочерние элементы тоже обрезаются; box-shadow снаружи формы не виден
  • shape-outside без float — shape-outside работает только на floated-элементах
  • Проценты в clip-path — проценты считаются от размера элемента; при изменении размера форма масштабируется
  • Анимация между разными функциями — нельзя анимировать circle → polygon; функции должны совпадать

Связанные темы

Ресурсы