Обрезка и маски: clip-path, mask, blend-mode

Все три меняют то, как элемент виден на экране, но делают это по-разному.

clip-path — ножницы. Вырезает форму: внутри видно, снаружи нет. Края резкие, промежуточных состояний не бывает.

mask — трафарет. Прозрачность элемента берётся из другой картинки или градиента. Можно сделать плавное растворение.

mix-blend-mode — смешивание. Определяет, как цвета элемента складываются с цветами того, что под ним. Ничего не вырезает.

Самый частый случай — polygon(): набор точек в процентах от размера элемента. Первая координата — по горизонтали, вторая — по вертикали.

Считать эти проценты руками мучительно, поэтому их подбирают мышью.

<section class="hero">  <h2>Кофейня «Полка»</h2>  <p>Варим с восьми утра</p></section>​<section class="next">  <p>Следующая секция подъезжает под скос.</p></section>

.hero {  padding: 40px 24px 60px;  color: #fff;  background: linear-gradient(135deg, #7c5cff, #b06cff);​  /* Левый нижний угол опущен ниже правого */  clip-path: polygon(0 0, 100% 0, 100% 88%, 0 100%);}​.hero h2 { margin: 0 0 6px; }.hero p { margin: 0; opacity: .85; }​.next {  /* Отрицательный отступ подтягивает секцию под скос */  margin-top: -24px;  padding: 30px 24px;  background: #f4f4f8;}​.next p { margin: 0; }

clip-path анимируется, но с одним условием: у начальной и конечной формы должно быть одинаковое число точек. Иначе браузеру не между чем интерполировать, и переход будет резким.

Приём: если нужно «раскрыть» блок из точки, задай начальную форму с тем же количеством вершин, просто сведённых вместе.

1.card {2  /* Четыре точки, но все схлопнуты к левому краю */3  clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);4  transition: clip-path .5s cubic-bezier(.22, 1, .36, 1);5}67.card.is-open {8  /* Те же четыре точки, разведённые по углам */9  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);10}

Маска берёт прозрачность из другого изображения. Белое (точнее, непрозрачное) — видно, чёрное или прозрачное — не видно, серое — полупрозрачно.

Чаще всего в качестве маски выступает обычный градиент — и это самый простой способ сделать растворение у края.

<div class="fade">  <p>Этот текст растворяется книзу — типичный приём для свёрнутого блока «читать дальше». Никакой картинки поверх, просто маска.</p>  <p>Обрати внимание: фон под ним остаётся виден. Плашка градиента так не умеет.</p></div>​<div class="scroller">  <span>Эти</span><span>элементы</span><span>уезжают</span><span>за</span><span>край</span><span>и</span><span>тают</span></div>

.fade {  padding: 14px;  background: #f4f4f8;  border-radius: 10px;​  /* Снизу вверх: непрозрачное к прозрачному */  mask-image: linear-gradient(to bottom, #000 55%, transparent);}​.fade p { margin: 0 0 8px; font-size: 14px; }​.scroller {  display: flex;  gap: 10px;  margin-top: 16px;  padding: 10px 0;  overflow-x: auto;​  /* Тают оба края — видно, что список продолжается */  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);}​.scroller span {  flex: none;  padding: 6px 12px;  background: #6544e0;  color: #fff;  border-radius: 999px;  font-size: 13px;}

Градиент — частый, но не единственный источник маски. Подойдёт любое изображение: PNG с прозрачностью, SVG, даже вторая копия элемента.

Классический приём — одноцветная иконка из любого файла: вместо того чтобы перекрашивать картинку, её делают маской, а цвет берут из фона.

1.icon-mask {2  inline-size: 24px;3  block-size: 24px;45  /* Цвет задаёт фон, а форму — маска */6  background: currentColor;7  mask-image: url("icon.svg");8  mask-size: contain;9  mask-repeat: no-repeat;10  mask-position: center;11}

mix-blend-mode смешивает элемент с тем, что под ним, а background-blend-mode — слои фона между собой. Разница важна: первое затрагивает соседей по странице, второе остаётся внутри одного элемента.

Режимов около шестнадцати, они пришли из графических редакторов. В вёрстке реально используются пять.

<figure class="duo">  <div class="duo__art"></div>  <figcaption>Один и тот же градиент, разные режимы</figcaption></figure>

.duo__art {  height: 150px;  border-radius: 12px;​  /* Два слоя фона смешиваются между собой */  background-image:    linear-gradient(45deg, #6544e0, #0f8f6a),    radial-gradient(circle at 30% 35%, #fff 0 12%, transparent 40%),    radial-gradient(circle at 70% 65%, #000 0 18%, transparent 45%);​  /* Попробуй заменить на screen, overlay, difference */  background-blend-mode: multiply;}​.duo { margin: 0; }.duo figcaption { margin-top: 8px; font-size: 13px; color: #666; }

1@layer components {2  /* Горизонтальная лента: края тают, значит список продолжается */3  .gallery {4    display: flex;5    gap: 16px;6    overflow-x: auto;7    scroll-snap-type: x mandatory;8    mask-image: linear-gradient(9      to right, transparent, #000 24px, #000 calc(100% - 24px), transparent10    );11  }1213  .gallery__item { flex: none; scroll-snap-align: start; }1415  /* Подпись поверх снимка: multiply убирает белый фон подписи */16  .gallery__caption {17    mix-blend-mode: multiply;18    background: #fff;19    padding-inline: 8px;20  }2122  /* Тень под фигурной обрезкой — только через drop-shadow */23  .gallery__badge {24    clip-path: polygon(0 0, 100% 0, 100% 78%, 50% 100%, 0 78%);25  }2627  .gallery__badge-wrap {28    filter: drop-shadow(0 6px 12px rgb(20 24 48 / .35));29  }30}

• Прятать содержимое обрезкой. clip-path убирает только изображение: текст остаётся в разметке, программа чтения с экрана его прочитает, поиск по странице найдёт. Скрывать надо hidden или display: none.
• Обрезать интерактивные элементы. Часть кнопки за пределами формы перестаёт быть видимой, но остаётся кликабельной. Человек будет попадать в пустоту.
• Смешивание на большой площади. mix-blend-mode заставляет браузер заново считать композицию слоёв. На полноэкранном блоке с прокруткой это заметно проседает.
• Маска вместо простого скругления. Если нужно скруглить углы, есть border-radius. Маска здесь дороже и хуже отлаживается: в инструментах разработчика её результат не показывается отдельным слоем, и понять, что именно обрезалось, можно только по картинке.

1/* База: обычный блок. Если clip-path не поддержан — просто без скоса */2.hero { background: linear-gradient(135deg, #7c5cff, #b06cff); }34@supports (clip-path: polygon(0 0, 100% 0, 100% 90%, 0 100%)) {5  .hero { clip-path: polygon(0 0, 100% 0, 100% 88%, 0 100%); }6}

<section class="hero">  <h2>Кофейня «Полка»</h2>  <p>Варим с восьми утра</p></section>​<div class="fade">  <p>Длинный текст, который должен растворяться книзу, а не обрываться резко.</p>  <p>Вторая строка нужна, чтобы растворение было заметно.</p></div>

.hero {  padding: 34px 20px 50px;  color: #fff;  background: linear-gradient(135deg, #7c5cff, #b06cff);  /* 1. Добавь скос */}​.hero h2 { margin: 0 0 6px; }.hero p { margin: 0; opacity: .85; }​.fade {  margin-top: 16px;  padding: 14px;  background: #f4f4f8;  border-radius: 10px;  /* 2. Добавь растворение книзу */}​.fade p { margin: 0 0 8px; font-size: 14px; }

1<section class="hero">2  <h2>Кофейня «Полка»</h2>3  <p>Варим с восьми утра</p>4</section>56<div class="fade">7  <p>Длинный текст, который должен растворяться книзу, а не обрываться резко.</p>8  <p>Вторая строка нужна, чтобы растворение было заметно.</p>9</div>

1.hero {2  padding: 34px 20px 50px;3  color: #fff;4  background: linear-gradient(135deg, #7c5cff, #b06cff);5  clip-path: polygon(0 0, 100% 0, 100% 88%, 0 100%);6}78.hero h2 { margin: 0 0 6px; }9.hero p { margin: 0; opacity: .85; }1011.fade {12  margin-top: 16px;13  padding: 14px;14  background: #f4f4f8;15  border-radius: 10px;16  -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent);17  mask-image: linear-gradient(to bottom, #000 55%, transparent);18}1920.fade p { margin: 0 0 8px; font-size: 14px; }