WEBDESIGN

Quicktipp CSS – Kreis und Dreieck ohne Bilder

CSS3 bietet ganz neue Möglichkeiten, Formen und Objekte darzustellen, für welche man früher Bilder benötigt hätte. In diesem kleinen Quicktipp geht es darum, Dreiecke, Kreise und Ovale rein mit CSS darzustellen. Dreiecke können zwar ohne weiteres von den meisten neuen Browser die CSS3 und HTML5 unterstützen dargestellt werden, verlangen jedoch die Anwendung eines kleinen "Tricks".

Video & Demo


Der Kreis

Um einen Kreis zu erzeugen, macht man sich die border-radius Eigenschaft zu Nutze. Zunächst einmal legen wir ein Quadrat an, hierfür eignet sich ein DIV – Container mit der selben Breite wie Höhe (Bedingung für ein Quadrat, alle Seiten gleich lang). Die Breite (und damit auch die Höhe) bestimmt den Durchmesser des Kreises. Um aus dem Quadrat nun einen Kreis zu erzeugen, werden die Ecken solang abgerundet bis ein Kreis entsteht, dies ist genau dann der Fall wenn die border-radius: 50% der Breite hat.
Eine prozentuale Angabe der Eigenschaft border-radius wird leider nicht in allen Browsern anstandslos akzeptiert, deshalb empfiehlt es sich hierbei in manchen Fällen den Wert von Hand anzugeben um Konflikte zu vermeiden.

<style>
#kreis{
	width:100px;
	height:100px;
	background:#469DFA;
	border-radius:50%;
	-moz-border-radius:50%;
	-webkit-border-radius:50%;
}
</style>
<div id="kreis"></div>	

Das Dreieck

Dreiecke sind ein etwas schwierigeres Kapitel, mit der Eigenschaft border-radius kommt man hier nicht weit. Ein DIV-Container kann auch nur eingeschränkt als Basis dienen, da die Anzahl der Ecken fest auf 4 begrenzt ist. Mit einem kleinen Trick kann man aber dieses Problem umgehen, die Idee ist dabei Folgende. Man erzeugt einen DIV – Container mit der Höhe und Breite 0px, dann gibt man diesem Container (je nach Größe des Dreiecks) 3 entsprechend dicke Ränder. Dabei kommt es darauf an, wie das Dreieck ausgerichtet sein soll, dadurch wird die Dicke und die Position der Ränder bestimmt. Wichtig ist dabei, dass 2 der 3 Ränder durchsichtig sind, also die Hintergrundfarbe transparent bekommen.

Konkretes Beispiel:

<style>
#dreieck{
    width:0px;
    height:0px;
	border-left: 50px solid transparent;
	border-right: 50px solid transparent;
	border-bottom: 100px solid yellow;
}
</style>
<div id="dreieck"></div>


Kommentare ( 4 Kommentare )

  • macgoofy Antworten ↓

    Das mit dem Dreieck funktioniert, wenn man das Style auch entsprechend in '#dreieck' umbenennt. :P

  • Uschie3000 Antworten ↓

    Hey, ich hab da mal ne Frage:

    kann man beim Kreis auch die border-color ändern ?
    Und wenn ja wie geht das ?

    Ich hab es schon mit border-color:black; probiert und die Hintergrundfarbe des Kreises auf Weiß gestellt.

    • m0d Antworten ↓

      Hi,
      du kannst zusätzlich einen sichtbaren Rand hinzufügen:

      #kreis{  
          width:100px;  
          height:100px;  
          background:#469DFA; 
          border:2px solid black; /* <--- */ 
          border-radius:50%;  
          -moz-border-radius:50%;  
          -webkit-border-radius:50%;  
      }
      

  • tuxenberger Antworten ↓

    Border funktioniert leider nicht mit Safari :-/

Schreib einen Kommentar