27. August 2023
Mit CSS clip-path kannst du divs in jeder beliebigen Form erstellen.
Standardmäßig ist ein div viereckig. Um außergewöhnliche Designs umzusetzen, ist es manchmal erforderlich, dass divs in einer anderen Form dargestellt werden müssen. In der Regel setzt man hier dann pngs mit Transparenz ein.
Für einfache Formen sind CSS clip-paths allerdings die elegantere Lösung. So kann z.B. solch ein Hexagon mit folgendem Code erzeugt werden.
clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);Die Syntax ist hierbei eigentlich selbsterklärend: Innerhalb der Klammer werden die Koordinaten der Eckpunkte aufgelistet.
.demo{
clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
width:180px;
height:150px;
background: #33485E;
margin:10px 0 10px 20px;
float:right;
}Natürlich lassen sich auch Background-Images innerhalb dieses divs anzeigen. Eine weitere Möglichkeit clip-path zu nutzen, hatte hier schon mal geschrieben.
Auf dieser Seite gibt es einen Clip-Path-Generator, der die Erstellung deutlich vereinfacht:
Nächster Artikel