Wie lassen sich präzise Hover-Effekte auf unregelmäßig geformten (trapezförmigen) Trichter-Segmenten realisieren?

Melden

Die Umsetzung präziser Hover-Effekte auf trapezförmigen Flächen ist eine klassische Herausforderung im Webdesign, da das Standard-Box-Modell von CSS immer rechteckig ist.

Hier sind die drei besten Methoden, um dies umzusetzen – sortiert von „hochpräzise“ bis „modern & einfach“.

1. Die Königslösung: SVG (Scalable Vector Graphics)

SVGs sind für unregelmäßige Formen prädestiniert. Das Besondere: Der Hover-Zustand wird bei einem <path> oder <polygon> nur auf der tatsächlich gezeichneten Fläche ausgelöst, nicht auf dem umschließenden Rechteck.

Vorteile:

  • Absolute Präzision.
  • Perfekt responsiv.
  • Einfaches Styling via CSS.

Code-Beispiel:

<svg viewBox="0 0 400 150" class="funnel">
  <!-- Oberes Segment (Trapez) -->
  <path d="M0,0 L400,0 L350,50 L50,50 Z" class="segment" />
  <!-- Mittleres Segment (Trapez) -->
  <path d="M50,55 L350,55 L300,105 L100,105 Z" class="segment" />
</svg>

<style>
  .segment {
    fill: #3498db;
    transition: fill 0.3s, transform 0.3s;
    cursor: pointer;
  }

  .segment:hover {
    fill: #2980b9;
    transform: scale(1.02);
    transform-origin: center;
  }
</style>

2. Die moderne CSS-Lösung: clip-path

Mit der CSS-Eigenschaft clip-path kannst du ein normales div in eine Trapezform schneiden. Moderne Browser (Chrome, Firefox, Safari, Edge) unterstützen die Interaktion so, dass der Hover-Effekt nur innerhalb der Schnittmaske reagiert.

Vorteile:

  • Du arbeitest mit normalen HTML-Elementen (gut für Text-Inhalt).
  • Einfache Syntax.

Code-Beispiel:

<div class="trapezoid">Segment 1</div>

<style>
  .trapezoid {
    width: 400px;
    height: 100px;
    background: #e74c3c;
    /* Erzeugt ein Trapez: oben breit, unten schmal */
    clip-path: polygon(0% 0%, 100% 0%, 80% 100%, 20% 100%);
    transition: background 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
  }

  .trapezoid:hover {
    background: #c0392b;
    cursor: pointer;
  }
</style>

3. Der "Old School" Trick: CSS Transforms (Skew)

Bevor es clip-path gab, nutzte man transform: skew(). Dies ist jedoch für Trichter-Segmente sehr kompliziert, da man zwei gegenüberliegende Skews kombinieren muss, um ein gleichschenkliges Trapez zu erhalten.

Nachteil: Die Hitbox (der Hover-Bereich) ist oft unsauber, und die Text-Ausrichtung innerhalb des verzerrten Containers ist mühsam. Nicht empfohlen für präzise Trichter.

Profi-Tipps für die Umsetzung:

  1. Abstände (Gaps): Bei Trichtern liegen die Segmente oft direkt übereinander. Wenn du clip-path nutzt, achte darauf, dass sich die Polygone nicht überlappen, da sonst der Hover-Effekt des oberen Elements das untere verdecken könnte. Nutze kleine Abstände in den Koordinaten (z. B. 0-48% und 52-100%).
  2. Filter & Schatten: Ein Problem bei clip-path ist, dass box-shadow mit abgeschnitten wird. Um einen Schatten auf ein Trapez zu werfen, musst du filter: drop-shadow(...) auf das Eltern-Element anwenden.
  3. Tooltips: Wenn du Tooltips beim Hover anzeigen willst, platziere diese außerhalb des geclippten Bereichs oder nutze ein übergeordnetes Container-Element, da clip-path alles außerhalb der Form radikal abschneidet.

Welche Methode wählen?

  • Wenn der Trichter Teil einer Datenvisualisierung ist oder sehr komplexe Formen hat: SVG.
  • Wenn du einfach nur 3-4 Kacheln untereinander in Trapezform anordnen willst, in denen Text steht: CSS clip-path.
0