Geometrische Formen mit CSS

Zur Navigation springen Zur Suche springen

Mit CSS-Mitteln kann man erstaunliche Effekte erzielen, z.B. Icons, Kreise, ect. Die Basis bildet jeweils ein CSS-Blockelement.

Die Gestaltung durch die Pseudoelemente :after und :before ist inline nicht möglich, diese kann durch zusätzlich <div>-Elemente ersetzt werden. Außerdem werden oft Elemente wie transform, border-radius etc. eingesetzt.

Kommen Pseudo-Elemente vor, so sperrt man alle in eine <div></div>-Box und schaut, wie man sie anordnene muss, damit sich die gewünschte Form ergibt.

Kreis

width: 140px;
height: 140px;
background: coral;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;

Dreieck mit der Spitze nach oben

width: 0;
height: 0;
border-bottom: 120px solid green;
border-left: 60px solid transparent;
border-right: 60px solid transparent;

Dreieck mit der Spitze nach unten

width: 0;
height: 0;
border-top: 80px solid BlueViolet;
border-left: 60px solid transparent;
border-right: 60px solid transparent;

Dreieck mit der Spitze nach links

width: 0;
height: 0;
border-right: 100px solid CornflowerBlue;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;

Dreieck mit der Spitze nach rechts

width: 0;
height: 0;
border-left: 100px solid DarkTurquoise;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;

Gleichschenkeliges Trapez

height: 0;
width: 80px;
border-bottom: 80px solid DodgerBlue;
border-left: 40px solid transparent;
border-right: 40px solid transparent;

Fünfeck mit der Spitze nach oben

Dieses Fünfeck setzt sich aus einem Dreieck und einem Trapez zusammen. Färbt man die einzelnen Bestandteile unterschiedlich ein, so ist dies deutlich zu erkennen. Im Original mit Pseudoelementen realisiert.
<div>
<div style="position: relative;
width: 0;
border-width: 0 45px 35px;
border-style: solid;
border-color: transparent transparent green;"></div>
<div style="position: relative;
width: 54px;
border-width: 50px 18px 0;
border-style: solid;
border-color: blue transparent;"></div>
</div>
/* Zum Vergleich der Original-Code */
#pentagon {
    position: relative;
    width: 54px;
    border-width: 50px 18px 0;
    border-style: solid;
    border-color: #037CA9 transparent;
}
 
#pentagon:before {
    content: "";
    position: absolute;
    height: 0;
    width: 0;
    top: -85px;
    left: -18px;
    border-width: 0 45px 35px;
    border-style: solid;
    border-color: transparent transparent #037CA9;
}

Links