Formes complexes

Présentation

Pour découper des éléments selon des formes complexes et libres, comme des coups de pinceau ou des textures organiques, utilisez le masquage CSS (mask-image). Alors que clip-path est idéal pour les formes géométriques ou les tracés vectoriels, mask-image vous permet d'utiliser des images (comme des PNG avec transparence) ou des SVG pour définir la zone visible d'un élément. Cette approche est plus expressive, car elle accepte la semi-transparence, ce qui permet d'obtenir des bords lisses et des textures complexes difficiles, voire impossibles, à obtenir avec clip-path.

Implémentation

Pour implémenter des formes complexes à l'aide de masques CSS :

Utiliser la transparence d'une image

Vous pouvez utiliser la transparence d'une image comme masque, les parties opaques étant visibles et les parties transparentes masquées. Il peut s'agir d'une image PNG, SVG ou d'une autre image transparente, ou d'une image générée, comme un dégradé 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;
}

Utiliser un élément SVG en HTML

Vous pouvez également référencer un élément <mask> défini dans un SVG intégré au code HTML de votre page. Utilisez maskContentUnits="objectBoundingBox" pour que le masque s'adapte automatiquement à la taille de l'élément. Cela indique au navigateur d'interpréter toutes les coordonnées à l'intérieur du masque comme des fractions de 0 à 1 (comme 0.5 pour 50 %) au lieu de pixels absolus.

Masquage par luminance ou par alpha : par défaut, les masques SVG utilisent la luminance (luminosité) pour déterminer l'opacité. Le blanc révèle, le noir masque et le gris crée une semi-transparence. Si vous souhaitez que le masque utilise plutôt le canal alpha (transparence) de vos formes SVG, vous pouvez spécifier mask-type: alpha; dans votre CSS ou mask-type="alpha" directement sur l'élément SVG <mask>.

<!-- 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>

Stratégies de remplacement

Si un navigateur n'est pas compatible avec mask-image ou la version préfixée :

• L'élément ne sera pas découpé et s'affichera sous la forme d'un rectangle normal.
• Assurez-vous que le contenu reste lisible et que la mise en page ne se déforme pas sans le masque (amélioration progressive).
• Vous pouvez également utiliser la détection de caractéristiques pour fournir une forme de remplacement plus simple avec 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);
  }
}