Formausschnitte

Webfunktionen: Masken

Übersicht

Mit CSS-Masken können Sie ein Element auf eine benutzerdefinierte Form zuschneiden, z. B. eine Kerbe in eine Karte einfügen oder einen geformten Rahmen erstellen. Wenn Sie Formen für komplexe Layouts kombinieren, wählen Sie Ihre Maskierungsstrategie basierend auf dem Inhaltstyp des Elements aus:

Maskierungsstrategie Optimal für Textwirkung
SVG-Maskierung für direkte Elemente Bilder, Symbole, dekorative Formen, komplexe Formen Nicht empfohlen (Text kann abgeschnitten werden)
SVG-Maskierung für benachbarte Elemente Karten mit Text, wichtige Inhalte Text remains fully readable
Pure CSS Gradients Einfache geometrische Formen Nicht empfohlen (Text kann abgeschnitten werden)

Implementierung

So implementieren Sie geformte Ausschnitte:

SVG-Maske verwenden

Mit SVG-Masken können Sie Formen definieren, die mit weißen (einblenden) und schwarzen (ausblenden) Füllungen vom sichtbaren Bereich subtrahiert oder ihm hinzugefügt werden.

Luminanz- vs. Alphamaskierung: SVG-Masken verwenden standardmäßig den Luminanzmodus (Helligkeit). Deshalb verwenden wir fill="white", um Bereiche anzuzeigen, und fill="black", um sie auszuschneiden. Wenn Sie die Transparenz (Alphakanal) der SVG-Datei anstelle von Farben verwenden möchten, können Sie mask-type: alpha; in CSS oder mask-type="alpha" für das SVG-Element <mask> festlegen.

SVG-Maskierung für direkte Elemente

Wenn das Element keinen Text enthält (z. B. Profil-Avatare, Produktbilder oder Illustrationen), können Sie die SVG-Maske direkt auf das Element anwenden.

Wenn Sie maskContentUnits="objectBoundingBox" in der SVG-Maske verwenden, wird die Maske automatisch auf die Breite und Höhe des Elements skaliert, auf das sie angewendet wird.

<!-- 1. Define the mask in SVG (hidden from view) -->
<svg width="0" height="0" style="position: absolute;" aria-hidden="true">
  <defs>
    <!-- objectBoundingBox makes the mask scale from 0 to 1 along the element's borders -->
    <mask id="splat-mask" maskContentUnits="objectBoundingBox">
      <!-- Organic Bezier path defining an artistic paint splat shape -->
      <path d="M 0.5 0.05 C 0.58 0.05, 0.58 0.21, 0.67 0.18 C 0.76 0.15, 0.79 0.08, 0.85 0.15 C 0.91 0.22, 0.83 0.32, 0.89 0.38 C 0.95 0.44, 1.03 0.45, 0.99 0.55 C 0.95 0.65, 0.82 0.62, 0.8 0.72 C 0.78 0.82, 0.89 0.92, 0.8 0.97 C 0.71 1.02, 0.64 0.88, 0.55 0.93 C 0.46 0.98, 0.44 1.06, 0.35 1.01 C 0.26 0.96, 0.31 0.81, 0.22 0.79 C 0.13 0.77, 0.01 0.88, 0.01 0.77 C 0.01 0.66, 0.16 0.62, 0.14 0.52 C 0.12 0.42, -0.02 0.39, 0.03 0.29 C 0.08 0.19, 0.23 0.27, 0.29 0.19 C 0.35 0.11, 0.3 0.01, 0.4 0.01 C 0.5 0.01, 0.42 0.05, 0.5 0.05 Z" fill="white" />
    </mask>
  </defs>
</svg>

<!-- 2. Apply the mask to the image element -->
<img src="avatar.jpg" alt="User Profile" class="shaped-avatar">

<style>
.shaped-avatar {
  width: 200px;
  height: 200px;
  object-fit: cover;
  
  /* Apply the SVG mask ID with standard and webkit-prefixed properties */
  -webkit-mask-image: url(#splat-mask);
  mask-image: url(#splat-mask);
}
</style>

SVG-Maskierung für benachbarte Elemente

Wenden Sie die Maske auf ein benachbartes Element an, nicht auf das übergeordnete Element, das Text enthält. So wird verhindert, dass Text abgeschnitten wird, und er bleibt lesbar.

Um dieses Problem zu beheben, strukturieren Sie Ihre Komponente in ein zweiteiliges Layout:

  1. Einen sicheren, unmaskierten Textcontainer (.card-body) für alle lesbaren Inhalte.
  2. Ein leeres dekoratives div (.card-accent) daneben, das die benutzerdefinierte SVG-Maske erhält.

Wenn Sie beiden Teilen dieselbe Hintergrundfarbe zuweisen, werden sie visuell zu einer einzigen, benutzerdefinierten Komponente zusammengeführt.

<!-- 1. Define the SVG mask (hidden from view) -->
<svg width="0" height="0" style="position: absolute;" aria-hidden="true">
  <defs>
    <!-- Use objectBoundingBox to make the mask scale with the element -->
    <mask id="accent-stencil" maskContentUnits="objectBoundingBox">
      <!-- Fill the entire area with white (fully visible) -->
      <rect width="1" height="1" fill="white" />
      <!-- Draw a black shape to cut out a concave curve. Extending the path to x=1.1 guarantees it fully clears the right edge, preventing subpixel lines -->
      <path d="M 1.1,0 C 0.4,0.1 0.4,0.9 1.1,1 L 1.1,0 Z" fill="black" />
    </mask>
  </defs>
</svg>

<!-- 2. Create the unified card layout -->
<div class="unified-card">
  <!-- The text-bearing element remains unmasked and perfectly rectangular -->
  <div class="card-body">
    <h3>Premium Membership</h3>
    <p>Get exclusive weekly updates on modern web standards and premium UI designs.</p>
  </div>
  <!-- The empty accent element next to it is masked to form the custom shape -->
  <div class="card-accent"></div>
</div>

<style>
.unified-card {
  display: flex;
  width: 400px;
}

.card-body {
  flex: 1;
  background-color: #1e293b; /* Elegant slate color */
  color: #f8fafc;
  padding: 24px;
  border-top-left-radius: 16px;
  border-bottom-left-radius: 16px;
}

.card-accent {
  width: 60px;
  background-color: #1e293b; /* Same background color so they merge visually without seams */
  border-top-right-radius: 16px;
  border-bottom-right-radius: 16px;

  /* Reference the SVG mask */
  -webkit-mask-image: url(#card-accent-mask);
  mask-image: url(#card-accent-mask);
}
</style>

Einzelnen CSS-Farbverlauf für einfache Ausschnitte verwenden

Wenn Sie nur einfache geometrische Ausschnitte benötigen (z. B. eine halbkreisförmige obere Aussparung, seitliche Einrückungen oder gerade diagonale Schnitte), müssen Sie keine externe SVG-Datei schreiben oder referenzieren. Stattdessen können Sie einen radialen oder linearen CSS-Farbverlauf direkt in der Property mask-image definieren.

<div class="gradient-masked-card">
  <h3>Notched Coupon Card</h3>
  <p>This card uses a pure CSS radial gradient to cut out a semi-circular notch along its top edge.</p>
</div>

<style>
.gradient-masked-card {
  background: linear-gradient(135deg, #3b82f6, #1d4ed8);
  color: white;
  padding: 40px 24px 24px 24px; /* Extra top padding ensures content clears the notch */
  border-radius: 16px;
  text-align: center;

  /* radial-gradient places a circle at 50% (horizontal center) and 0% (top edge), cutting out a 20px transparent notch */
  -webkit-mask-image: radial-gradient(circle at 50% 0%, transparent 20px, black 21px);
  mask-image: radial-gradient(circle at 50% 0%, transparent 20px, black 21px);
}
</style>

Fallback-Strategien

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

  • Für geformte Bilder: Das Element wird ordnungsgemäß herabgestuft und als normales rechteckiges Element mit den Standard-Fallback-Stilen angezeigt.
  • Für geformte Karten: Das angrenzende dekorative .card-accent-Element bleibt ein durchgehendes, unmaskiertes Rechteck. Da sie dieselbe Hintergrundfarbe wie der Textcontainer hat, wird die gesamte Karte einfach als standardmäßiger, sauberer rechteckiger Container gerendert.
  • Progressive Verbesserung: Wenn Sie Textebenen vollständig außerhalb der Maske belassen, bleiben Ihre Inhalte in älteren Browsern vollständig lesbar, strukturiert und zugänglich.