Сложные фигуры

Обзор

Чтобы обрезать элементы по сложным формам, например мазкам кисти или органическим текстурам, используйте маски CSS (mask-image). Свойство clip-path отлично подходит для геометрических фигур или векторных контуров, а mask-image позволяет использовать изображения (например, PNG с прозрачностью) или SVG для определения видимой области элемента. Этот подход более выразителен, поскольку поддерживает полупрозрачность, позволяя создавать мягкие края и сложные текстуры, которых трудно или невозможно достичь с помощью clip-path.

Реализация

Чтобы реализовать сложные фигуры с помощью масок CSS, выполните следующие действия:

Использование прозрачности изображения

В качестве маски можно использовать прозрачность изображения, при этом непрозрачные части будут видны, а прозрачные – скрыты. Это может быть изображение в формате PNG, SVG или другом формате с прозрачностью, а также сгенерированное изображение, например градиент CSS.

.shaped-element {
  /* MANDATORY: Use vendor prefix for wider support in older browsers */
  -webkit-mask-image: url('mask.svg');
  -webkit-mask-size: cover; /* Scale mask to cover element */
  -webkit-mask-repeat: no-repeat; /* Do not tile the mask */

  /* Standard property for modern browsers */
  mask-image: url('mask.svg');
  mask-size: cover;
  mask-repeat: no-repeat;
}

Как использовать элемент SVG в HTML

Вы также можете сослаться на элемент <mask>, определенный во встроенном SVG-файле в HTML-коде страницы. Используйте maskContentUnits="objectBoundingBox", чтобы маска автоматически масштабировалась в соответствии с размером элемента. Это указывает браузеру, что все координаты внутри маски нужно интерпретировать как доли от 0 до 1 (например, 0.5 для 50%), а не как абсолютные пиксели.

Яркость и альфа-маски. По умолчанию маски SVG используют яркость для определения непрозрачности, где белый цвет показывает, черный скрывает, а серый создает полупрозрачность. Если вы хотите, чтобы маска использовала альфа-канал (прозрачность) фигур SVG, укажите mask-type: alpha; в CSS или mask-type="alpha" непосредственно в элементе <mask> SVG.

<!-- White areas reveal content, gray creates semi-transparency, black or transparent hides it -->
<svg width="0" height="0">
  <defs>
    <!-- objectBoundingBox scales mask coordinates (0 to 1) with the element's size -->
    <mask id="custom-shape" maskContentUnits="objectBoundingBox">
      <!-- Use white shapes to define fully opaque areas -->
      <circle cx="0.5" cy="0.5" r="0.5" fill="white" />
      <!-- Use gray shapes to define semi-transparent/faded areas -->
      <circle cx="0.5" cy="0.5" r="0.25" fill="gray" />
    </mask>
  </defs>
</svg>

<div class="masked-content">
  <!-- Content to be masked -->
</div>

<style>
.masked-content {
  /* Reference the SVG mask ID */
  -webkit-mask-image: url(#custom-shape);
  mask-image: url(#custom-shape);
}
</style>

Резервные стратегии

Если браузер не поддерживает mask-image или версию с префиксом:

• Элемент не будет обрезан и будет отображаться как обычный прямоугольник.
• Убедитесь, что контент по-прежнему читаем, а макет не нарушается без маски (прогрессивное улучшение).
• При необходимости используйте определение функций, чтобы предоставить более простую резервную форму с помощью clip-path.

/* Fallback for browsers that do not support masking */
@supports (not (mask-image: url(x))) and (not (-webkit-mask-image: url(x))) {
  .shaped-element {
    /* Use a simple rounded rectangle as fallback */
    clip-path: inset(5% round 15px);
  }
}