CSS: Mit Pseudoelementen komplexe Formen erzeugen

Mit den CSS-Pseudoelementen before und after können vor – beziehungsweise nach – einem Element beliebige Inhalte eingefügt werden. Diese Inhalte lassen sich mit CSS ansprechen und verändern, womit verschiedenste Formen mit reinem CSS erstellbar sind. In den folgenden Code Schnipseln findet ihr einige Beispiele dafür, was mit den Selektoren und reinem CSS im IE9, Chrome, Safari, Firefox und Opera möglich ist.

CSS-Grundformen

Alle Formen, die wir gleich erzeugen werden, entstehen aus Grundformen, die mit CSS-Transform umpositioniert werden und so übereinander gelegt komplexe Formen ergeben. Wir fangen also mit einfachen Formen an und arbeiten uns weiter vor.

Wie man Grundformen wie Quadrate, Rechtecke oder Kreise erzeugt, dürfte kein allzu großes Geheimnis sein.

#quadrat {

width: 100px;

height: 100px;

background: #000;

}

#rechteck {

width: 200px;

height: 100px;

background: #000;

}

#kreis {

width: 100px;

height: 100px;

background: #000;

-moz-border-radius: 50px;

-webkit-border-radius: 50px;

border-radius: 50px;

}

Bei Dreiecken wird es schon ein wenig komplexer. Mit dem folgenden CSS-Code erzeugt ihr ein gleichschenkliges Dreieck mit einer Spitze nach oben:

#triangle-up {

width: 0;

height: 0;

border-left: 50px solid transparent;

border-right: 50px solid transparent;

border-bottom: 100px solid #000;

}

Passt man die Breite von border-bottom an, wird das Dreieck höher. Mit der Anpassung der Breite von border-right und border-left könnt ihr den Winkel oben steuern. Soll das Dreieck mit Spitze nach unten erzeugt werden, ändert ihr border-bottom in border-top.

Mit einer ähnlichen Herangehensweise kann ein Trapez erzeugt werden. Hierfür müsst ihr lediglich die width für das Objekt angepassen.

#trapezoid {

border-bottom: 100px solid #000;

border-left: 50px solid transparent;

border-right: 50px solid transparent;

height: 0;

width: 100px;

}

Ein Parallelogramm erzeugt ihr mit der CSS Transform-Methode skew.

#parallelogramm {

width: 150px;

height: 100px;

-webkit-transform: skew(20deg);

-moz-transform: skew(20deg);

-o-transform: skew(20deg);

background: #000;

}

Komplexere Formen mit CSS before und after

Mit diesen Grundformen können wir jetzt komplexere Formen erzeugen. Im folgenden Listing werden mit CSS und den Pseudoelementen before und after Dreiecke erzeugt, gedreht und übereinander gelegt, sodass ein Stern mit 5 Spitzen entsteht.

#star-five {

margin: 50px 0;

position: relative;

display: block;

color: #000;

width: 0px;

height: 0px;

border-right: 100px solid transparent;

border-bottom: 70px  solid#000;

border-left: 100px solid transparent;

-moz-transform: rotate(35deg);

-webkit-transform: rotate(35deg);

-ms-transform: rotate(35deg);

-o-transform: rotate(35deg);

}

#star-five:before {

border-bottom: 80px solid#000;

border-left: 30px solid transparent;

border-right: 30px solid transparent;

position: absolute;

height: 0;width: 0;

top: -45px;

left: -65px;

display: block;

content: '';

-webkit-transform: rotate(-35deg);

-moz-transform: rotate(-35deg);

-ms-transform: rotate(-35deg);

-o-transform: rotate(-35deg);

}

#star-five:after {

position: absolute;

display: block;

color:#000;

top: 3px;

left: -105px;

width: 0px;

height: 0px;

border-right: 100px solid transparent;

border-bottom: 70px solid#000;

border-left: 100px solid transparent;

-webkit-transform: rotate(-70deg);

-moz-transform:    rotate(-70deg);

-ms-transform:     rotate(-70deg);

-o-transform:      rotate(-70deg);

content: '';

}

Etwas für den alltäglichen Einsatz bei der Erstellung eines GUI mit Tooltips wäre eine CSS-Sprechblase, die ihr mit dem folgenden Code erzeugen könnt:

#talkbubble {

width: 120px; 

height: 80px; 

background: #000;

position: relative;

-moz-border-radius: 10px; 

-webkit-border-radius: 10px;

border-radius: 10px;

}

#talkbubble:before {

content:"";

position: absolute;

right: 100%;

top: 26px;

width: 0;

height: 0;

border-top: 13px solid transparent;

border-right: 26px solid#000;

border-bottom: 13px solid transparent;

}

Pentagon

Auch Figuren wie ein Pentagon sind mit dem folgenden Code kein Problem.

#pentagon {

position: relative;

width: 54px;

border-width: 50px 18px 0;

border-style: solid;

border-color:#000 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#000;

}

Sogar ein Herz oder das Infinity-Symbol lassen sich mit reinem CSS erzeugen.

 

#heart {

position: relative;

width: 100px;

height: 90px;

}

#heart:before,

#heart:after {

position: absolute;

content: "";

left: 50px;

top: 0;

width: 50px;

height: 80px;

background: red;

-moz-border-radius: 50px 50px 0 0;

border-radius: 50px 50px 0 0;

-webkit-transform: rotate(-45deg);

-moz-transform: rotate(-45deg);

-ms-transform: rotate(-45deg);

-o-transform: rotate(-45deg);

transform: rotate(-45deg);

-webkit-transform-origin: 0 100%;

-moz-transform-origin: 0 100%;

-ms-transform-origin: 0 100%

;-o-transform-origin: 0 100%;

transform-origin: 0 100%;

}

#heart:after {

left: 0;

-webkit-transform: rotate(45deg);

-moz-transform: rotate(45deg);

-ms-transform: rotate(45deg);

-o-transform: rotate(45deg);

transform: rotate(45deg);

-webkit-transform-origin: 100% 100%;

-moz-transform-origin: 100% 100%;

-ms-transform-origin: 100% 100%;

-o-transform-origin: 100% 100%;

transform-origin :100% 100%;

}

 

 

#infinity {

position: relative;

width: 212px;

height: 100px;

}

#infinity:before,

#infinity:after {

content: "";

position: absolute;

top: 0;

left: 0;

width: 60px;

height: 60px;

border: 20px solid#000;

-moz-border-radius: 50px 50px 0 50px;

border-radius: 50px 50px 0 50px;

-webkit-transform: rotate(-45deg);

-moz-transform: rotate(-45deg);

-ms-transform: rotate(-45deg);

-o-transform: rotate(-45deg);

transform: rotate(-45deg);

}

#infinity:after {

left: auto;

right: 0;

-moz-border-radius: 50px 50px 50px 0; 

border-radius: 50px 50px 50px 0;

-webkit-transform: rotate(45deg);

-moz-transform: rotate(45deg);

-ms-transform: rotate(45deg);

-o-transform: rotate(45deg);

transform: rotate(45deg);

}

Wer einen Störer erzeugen möchte, kann den folgenden Code verwenden:

 

#burst-12 {

background: #000;

width: 80px;

height: 80px;

position: relative;

text-align: center;

}

#burst-12:before, #burst-12:after {

content: "";

position: absolute;

top: 0;

left: 0;

height: 80px;

width: 80px;

background: #000;

}

#burst-12:before {

-webkit-transform: rotate(30deg);

-moz-transform: rotate(30deg);

-ms-transform: rotate(30deg);

-o-transform: rotate(30deg);

}

#burst-12:after {

-webkit-transform: rotate(60deg);

-moz-transform: rotate(60deg);

-ms-transform: rotate(60deg);

-o-transform: rotate(60deg);

}

Mit der richtigen Anordnung von Kreisen erzeugt ihr sogar ein Yin-Yang.

 

#yin-yang{

width: 96px;

height: 48px;

background: #fff;

border-color:#000;

border-style: solid;

border-width: 2px 2px 50px 2px;

border-radius: 100%;

position: relative;

}

#yin-yang:before {

content: "";

position: absolute;

top: 50%;

left: 0;

background: #fff;

border: 18px solid #000;

border-radius: 100%;

width: 12px;

height: 12px;

}

#yin-yang:after {

content: "";

position: absolute;

top: 50%;

left: 50%;

background: #000;

border: 18px solid #fff;

border-radius:100%;

width: 12px;

height: 12px;

} 

CSS Formen - mehr als Codespielerei

Aus den verschiedenen Grundformen können in Kombination mit den Pseudoelementen before und after durch reines CSS verschiedenste Formen erzielt werden. Was sich zunächst als Spielerei zeigt, kann beim entsprechenden Einsatz ein nützlicher Begleiter werden und das Einbinden von der ein oder anderen Grafikdatei unnötig machen. Probiert es selbst aus und kreiert euere eigenen Formen und Effekte. Viel Spaß beim Experimentieren!

Über den Autor

Ilja Zaglov ist selbstständiger Kommunikations- & Mediendesigner. Er unterstützt kleine und mittelständische Unternehmen bei der Erstellung von Online- und Offline-Medien. Neben Web-Gestaltung gehören Motion-Graphics und 3D-Inhalte zu seinen Spezialgebieten.