Komplexe Formen

Übersicht

Wenn Sie Elemente auf komplexe, unregelmäßige Formen wie Pinselstriche oder organische Texturen zuschneiden möchten, verwenden Sie CSS-Masken (mask-image). Während clip-path sich hervorragend für geometrische Formen oder Vektorpfade eignet, können Sie mit mask-image Bilder (z. B. PNGs mit Transparenz) oder SVGs verwenden, um den sichtbaren Bereich eines Elements zu definieren. Dieser Ansatz ist ausdrucksstärker, da er Semitransparenz unterstützt und weiche Kanten und komplexe Texturen ermöglicht, die mit clip-path nur schwer oder gar nicht zu erreichen sind.

Implementierung

So implementieren Sie komplexe Formen mit CSS-Masken:

Transparenz aus einem Bild verwenden

Sie können die Transparenz eines Bildes als Maske verwenden, wobei undurchsichtige Teile sichtbar und transparente Teile ausgeblendet sind. Das kann ein PNG, SVG oder ein anderes Bild mit Transparenz oder ein generiertes Bild wie ein CSS-Farbverlauf sein.

.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-Element in HTML verwenden

Sie können auch auf ein <mask>-Element verweisen, das in einer Inline-SVG im HTML-Code Ihrer Seite definiert ist. Verwenden Sie maskContentUnits="objectBoundingBox", damit die Maske automatisch mit der Größe des Elements skaliert wird. Dadurch wird der Browser angewiesen, alle Koordinaten innerhalb der Maske als Brüche von 0 bis 1 (z. B. 0.5 für 50 %) statt als absolute Pixel zu interpretieren.

Luminanz- vs. Alphamaskierung: Standardmäßig wird bei SVG-Masken die Luminanz (Helligkeit) verwendet, um die Deckkraft zu bestimmen. Weiß zeigt an, Schwarz verbirgt und Grau erzeugt eine halbtransparente Darstellung. Wenn Sie stattdessen den Alphakanal (Transparenz) Ihrer SVG-Formen verwenden möchten, können Sie mask-type: alpha; in Ihrem CSS oder mask-type="alpha" direkt im SVG-Element <mask> angeben.

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

Fallback-Strategien

Wenn ein Browser mask-image oder die Version mit Präfix nicht unterstützt:

• Das Element wird nicht zugeschnitten und als normales Rechteck angezeigt.
• Achte darauf, dass der Inhalt auch ohne die Maske lesbar ist und das Layout nicht beeinträchtigt wird (progressive Verbesserung).
• Optional können Sie die Featureerkennung verwenden, um mit clip-path eine einfachere Fallback-Form bereitzustellen.

/* 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);
  }
}