Nur durch CSS Umsetzbar?

[Gunnar Bittersmann]

@@Gunnar Bittersmann

1. mit border, siehe The Shapes of CSS

2. mit linear-gradient, Bsp. background: linear-gradient(to left bottom, green 50%, transparent 50%), evtl. mit background-position / background-size

Beide Varianten haben den Nachteil, dass das Ergebnis – zumindest auf nicht-hochauflösenden Displays – scheußlich aussieht (verpixelt). Weder border noch linear-gradient sind für schräge Kanten gedacht; Browser machen kein Anti-Aliasing.

3. ein um 45° gedrehtes Quadrat: transform: rotate(45deg)

4. (Inline-)SVG

Damit sieht’s vernünftig aus.

LLAP 🖖