clip-path

clip-path: none | <clip-source> | [ <basic-shape> || <geometry-box> ]

📝 Описание

Создаёт область отсечения, которая показывает только часть элемента.

Значение по умолчанию: none

🎯 Возможные значения

  • none — без отсечения
  • circle() — круг
  • ellipse() — эллипс
  • polygon() — многоугольник
  • inset() — прямоугольник с отступами
  • url() — SVG path
.hexagon {
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

🌐 Поддержка браузеров

Chrome 55+, Firefox 54+, Safari 13.1+