Einfache Formen mit CSS erstellen – Anleitung & Beispiele

Das Erstellen einfacher geometrischer Formen mit CSS ist relativ unkompliziert. Im Grunde benötigt man dafür lediglich einen DIV-Container und eine passende CSS-Klasse. Im Folgenden wird gezeigt, wie sich mit wenigen CSS-Angaben schnell ein Quadrat, ein Rechteck, ein Dreieck oder ein Kreis darstellen lässt.

Auf diese Weise können nahezu beliebige geometrische Formen erzeugt werden. Eigenschaften wie Breite (width), die Höhe (height) und die Hintergrundfarbe (background-color) können nach Belieben angepasst werden. Hier darf man auch ruhig ein bisschen herumprobieren. Mithife von einem float-Befehl (float: left oder float: right) könnte man beispielsweise anschließend auch Text um die geometrischen Formen des DIV-Containers fließen lassen.  

CSS-Form Quadrat erstellen

.quadrat { 
 height: 100px; 
 width: 100px; 
 background-color: #FF0000; 
} 

<div class="quadrat"></div>

CSS-Form Rechteck erstellen

.rechteck { 
 height: 300px; 
 width: 225px; 
 background-color: #008000; 
} 

<div class="rechteck"></div> 

CSS-Form Dreieck erstellen

.dreieck { 
 width: 0; 
 height: 0; 
 border-left: 100px solid transparent; 
 border-right: 100px solid transparent; 
 border-bottom: 200px solid #0000ff; 
} 

<div class="dreieck"></div> 

Ändert man beim Dreieck das „border-bottom“ auf „border-top“, dann zeigt die Spitze des Dreiecks nach oben.
Passt man die CSS-Einstellungen entsprechend anders an, lässt sich auch ein Dreieck mit der Spitze nach links darstellen:

border-top: 100px solid transparent; 
border-right: 200px solid #0000ff;
border-bottom: 100px solid transparent;

Oder ein Dreieck mit Spitze nach rechts:

border-top: 100px solid transparent; 
border-left: 200px solid #0000ff;
border-bottom: 100px solid transparent;

CSS-Form Kreis erstellen

.kreis { 
 height: 200px; 
 width: 200px; 
 background-color: #ffff00; 
 border-radius: 50%; 
}

<div class="kreis"></div>

Halbiert man beim Kreis die Höhe „height: 200px;“ auf beispielsweise „height: 100px;“  würde man eine Ellipse als Form erhalten.