Свойство clip-path

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

.clip-me {  
  
  /* Example: clip away the element from the top, right, bottom, and left edges */
  clip-path: inset(10px 20px 30px 40px); /* or "none" */
  
  /* Example: clip element into a Heptagon */
  clip-path: polygon(50% 0%, 90% 20%, 100% 60%, 75% 100%, 25% 100%, 0% 60%, 10% 20%);


  /* Deprecated version */
  position: absolute; /* absolute or fixed positioning required */
  clip: rect(110px, 160px, 170px, 60px); /* or "auto" */
  /* values descript a top/left point and bottom/right point */
} 

Раньше существовало свойствоclip , но обратите внимание, что оно устарело.

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

<img class="clip-me" src="/images/image-to-be-clipped.png" alt="Descriptioin of image">

<p class="clip-me">
  I'll be clipped.
</p>

Эти четыре значения в inset() (в приведенном выше CSS) представляют верхнюю / левую точку и нижнюю / правую точку, которые образуют видимый прямоугольник. Все, что находится за пределами этого прямоугольника, скрыто.

Другие возможные значения:

.clip-me { 

  /* referencing path from an inline SVG  */
  clip-path: url(#c1); 

  /* referencing path from external SVG */
  clip-path: url(path.svg#c1);

  /* polygon */
  clip-path: polygon(5% 5%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%);

  /* circle */
  clip-path: circle(30px at 35px 35px);

  /* ellipse */
  clip-path: ellipse(65px 30px at 125px 40px);

  /* inset-rectangle() may replace inset() ? */
  /* rectangle() coming in SVG 2 */

  /* rounded corners... not sure if a thing anymore */
  clip-path: inset(10% 10% 10% 10% round 20%, 20%);

}

Пример пути к клипу SVG:

<clipPath id="clipping">
  <circle cx="150" cy="150" r="50" />
  <rect x="150" y="150" width="100" height="100" />
</clipPath>

Очень странно, что clip-path не поддерживалась path() функция out of the gate, поскольку path() это уже относится к таким свойствам, как motion-path. В Firefox теперь есть поддержка для этого, и мы ждем остальных браузеров.

Создайте свой собственный

Пока мы не сможем надежно использовать path(), наиболее полезными клипами для необычных пользовательских форм являются polygon(). Вот действительно удобный редактор, который также работает с кругами и эллипсами: