Обрезка и маски

Любой элемент на странице — прямоугольник. border-radius скругляет углы, но звезду или стрелку из него не сделать. Обрезка (clip-path) оставляет видимой только часть элемента внутри заданной фигуры, а маска (mask-image) управляет прозрачностью по картинке или градиенту.

clip-path: круг

Функция circle() вырезает круг. Первое число — радиус, после at — центр:

<style>
  img { clip-path: circle(40% at 50% 50%); }
</style>
 
<img src="/media/photo-200x200.jpg" alt="Фото" width="200" height="200">

Всё за пределами круга не видно и не ловит щелчки мыши, но место элемент занимает прежнее — квадрат 200 на 200.

Фигуры clip-path

Функция	Фигура	Пример
`circle()`	круг	`circle(50%)`
`ellipse()`	эллипс: два радиуса	`ellipse(50% 30%)`
`inset()`	прямоугольник с отступами от краёв	`inset(10px 20px round 12px)`
`polygon()`	многоугольник по точкам	`polygon(50% 0, 100% 100%, 0 100%)`

В polygon() каждая точка — пара координат «x y» от левого верхнего угла. Три точки дают треугольник, больше — любую фигуру:

<style>
  .shape { width: 120px; height: 120px; display: inline-block; margin: 4px; background: tomato; }
  .triangle { clip-path: polygon(50% 0, 100% 100%, 0 100%); }
  .arrow { clip-path: polygon(0 30%, 60% 30%, 60% 0, 100% 50%, 60% 100%, 60% 70%, 0 70%); }
  .rounded { clip-path: inset(15px round 20px); }
</style>
 
<div class="shape triangle"></div>
<div class="shape arrow"></div>
<div class="shape rounded"></div>

Анимация формы

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

<style>
  img { clip-path: circle(30%); transition: clip-path 0.5s; }
  img:hover { clip-path: circle(75%); }
</style>
 
<img src="/media/photo-400x250.jpg" alt="Фото" width="400" height="250">

Круг раскрывается до размеров всей картинки — популярный эффект для галерей.

mask-image: плавное исчезновение

Маска не обрезает резко, а задаёт прозрачность: где маска непрозрачна, элемент виден, где прозрачна — исчезает. Цвет маски не важен, важна только прозрачность. Градиент от чёрного к transparent растворяет низ блока:

<style>
  .fade {
    max-width: 320px;
    height: 90px;
    overflow: hidden;
    mask-image: linear-gradient(black 40%, transparent);
  }
</style>
 
<p class="fade">Раф придумали в одной московской кофейне в девяностых: постоянный гость просил кофе со сливками и ванилью, и бариста стал взбивать их вместе с эспрессо паром. Напиток прижился и разошёлся по другим кофейням.</p>

Текст тает к низу — так показывают, что дальше есть продолжение. Маску можно сделать и картинкой: mask-image: url(star.svg).

shape-outside: обтекание фигуры

Свойство shape-outside задаёт форму, которую обтекает текст. Оно работает только у плавающего элемента — с float из урока «Обтекание: float». Чтобы и сама картинка была круглой, добавляют такой же clip-path:

<style>
  img {
    float: left;
    shape-outside: circle(50%);
    clip-path: circle(50%);
    margin-right: 12px;
  }
  p { max-width: 420px; margin: 0; }
</style>
 
<p><img src="/media/photo-200x200.jpg" alt="Фото" width="120" height="120">Строки текста огибают круглую картинку, а не её квадратную рамку. Возле верхнего и нижнего края круга строки начинаются левее, а у середины — правее. Так вёрстка выглядит как в журнале, а не как ряд прямоугольников.</p>

Частая ошибка

shape-outside без float ничего не делает: текст обтекает только плавающие элементы. В примере ниже свойство задано, но картинка стоит в строке, как обычное слово, и текст её не огибает:

<style>
  img { shape-outside: circle(50%); clip-path: circle(50%); }
</style>
 
<p><img src="/media/photo-200x200.jpg" alt="Фото" width="80" height="80">Без float текст не обтекает картинку.</p>

Добавьте float: left — и строки встанут вокруг круга.

Спасибо, что читаете!