Wenn man früher in CSS etwas anderes als ein Rechteck haben wollte, musste man schon mal durch so einige Reifen springen. Um zum Beispiel ein <div> zu einem Dreieck zu machen, kann man mit dem border spielen:
<div class="triangle"></div>
.triangle {
width: 0;
height: 0;
border-left: 25px solid transparent;
border-right: 25px solid transparent;
border-bottom: 50px solid red;
}
Intuitiver sind da schon die basic shapes, die seit einigen Jahren verfügbar sind. Wenn man beispielsweise aus einem Bild nur einen kreisförmigen Ausschnitt zeigen möchte, verwendet man die Funktion circle():
(Beispielbild von beauty_of_nature auf Pixabay)
.myimg {
clip-path: circle(100px);
}
Für einen dreieckigen clip kann man die Funktion polygon() verwenden:
.myimg {
clip-path: polygon(0% 100%, 50% 0%, 100% 100%);
}
Für komplexere Ausschnitte kann man mit path() einen SVG-Pfad verwenden:
.myimg {
clip-path: path("M 0 200 L 0, 75 A 5, 5 0, 0, 1 150, 75 L 200 100 z");
}
Aber spätestens hier ist es mit der Intuitivität auch schon wieder vorbei. Wäre es nicht schön, wenn man die Form beschreiben könnte mit beispielsweise “beginne bei 0px / 0px, zeichne eine Linie nach 150px 50px, dann eine horizontale Linie für 70px, dann eine vertikale Linie bis 200px, dann schließe die Form”.
Das geht tatsächlich, und zwar mit der Funktion shape(), die seit ein paar Wochen Baseline ist.
.myimg {
clip-path: shape(
from 0px 0px,
line to 150px 50px,
hline by 70px,
vline to 200px,
close
);
}
Neben den Kommandos für gerade Linien kann man Kurven zeichnen (curve), Kreisabschnitte (arc) oder den virtuellen Stift an eine andere Position setzen (move). Bei CSS-Tricks gibt es eine umfangreiche Einführung.
