Wie erstellt man einfache Formen mit CSS? Die Lösung…

Blog

Wie erstellt man einfache Formen mit CSS? Die Lösung ist ganz einfach: Dazu benötigt man eigentlich nur einen DIV-Container und eine CSS-Klasse. Im Folgenden erkläre ich Euch, wie man ein Quadrat, ein Rechteck, ein Dreieck oder einen Kreis mittels CSS-Angaben ganz schnell erstellen kann.

Es lassen sich damit alle möglichen geometrischen Formen erstellen. Die Breite (width), die Höhe (height) und die Hintergrundfarbe (background-color) können natürlich nach Belieben angepasst werden. Hier darf man ruhig ein bisschen herumprobieren. Mittels 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 Formen: Wie kann man ein Quadrat erstellen?

<html> 
<head> 
   <style> 
   .quadrat { 
   height: 100px; 
   width: 100px; 
   background-color: #FF0000; 
    } 
  </style> 
</head> 
<body> 
  <div class="quadrat"></div> 
</body> 
</html>

CSS Formen: Wie kann man ein Rechteck erstellen?

<html> 
<head> 
<style> 
   .rechteck { 
      height: 300px; 
      width: 225px; 
      background-color: #008000; 
    } 
  </style> 
</head> 
<body> 
  <div class="rechteck"></div> 
</body> 
</html>

CSS Formen: Wie kann man ein Dreieck erstellen?

<html> 
<head> 
<style> 
.dreieck { 
   width: 0; 
   height: 0; 
   border-left: 100px solid transparent; 
   border-right: 100px solid transparent; 
   border-bottom: 200px solid #0000ff; 
  } 
  </style> 
</head> 
<body> 
  <div class="dreieck"></div> 
</body> 
</html>

Ändert man beispielsweise beim Dreieck das „border-bottom“ auf „border-top“, dann steht das Dreieck anschließend auf dem Kopf.

Ändert man die CSS-Angaben wieder anders um, dann erhält man ein Dreieck mit Spitze nach links:

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 Formen: Wie kann man einen Kreis erstellen?

<html> 
<head> 
<style> 
.kreis { 
  height: 200px; 
  width: 200px; 
  background-color: #ffff00; 
  border-radius: 50%; 
  } 
</style> 
</head> 
<body> 
  <div class="kreis"></div> 
</body> 
</html>

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

Schreibe einen Kommentar