Geometrische Formen mit CSS
Zur Navigation springen
Zur Suche springen
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
<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;
}