Vorheriger Artikel Nächster Artikel

CSS: Mit Pseudoelementen komplexe Formen erzeugen

Mit reinem ist einiges mehr möglich als nur abgerundete Ecken. Wir zeigen euch, wie ihr mit den Pseudoelementen before und after verschiedenste Formen mit reinem CSS erzeugen könnt und wie diese Formen entstehen.

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

CSS Grundformen
CSS-Rundformen

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;

}

CSS Dreieck Aufbau

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.

Mit CSS erzeugtes Herz
CSS Herz

 

#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%;

}

 

Mit CSS erzeugtes Infinity Symbol
CSS Infinity Symbol

 

#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:

Mit CSS erzeugter Störer
CSS Störer

 

#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.

Mit CSS erzeugtes Yin Yang
CSS 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 bigIlja 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.

Vorheriger Artikel Zurück zur Startseite Nächster Artikel
5 Antworten
  1. von Mario am 02.12.2012 (09:47Uhr)

    Schön zusammenkopiert.

    Antworten Teilen
  2. von igorshmigor am 03.12.2012 (13:50Uhr)

    Verrückt, vor über einem Jahr hatten andere ebenfalls Herz, Stern, Infinity-Symbol und Yin-Yang Zeichen mit CSS gemacht:
    http://css-tricks.com/examples/ShapesOfCSS/

    Zufälle gibts ;)

    Antworten Teilen
  3. von igorshmigor am 03.12.2012 (14:08Uhr)

    P.S.: will damit nur sagen, eine Erwähnung der Quellen/Authoren, deren Ideen hier aufgeführt wurden, wäre anständig gewesen.

    Antworten Teilen
  4. von tethi am 04.12.2012 (10:10Uhr)

    ich habe noch nie ein Blog oder Forum gesehen, wo so viel kritisiert wird.
    90% der User sind hier ja wahre Internet-Allwissende. Bei diesen überheblichen Kommentaren wird mir echt schlecht.

    Warum bereichern uns die Kritiker nicht einfach mal mit eigenen Artikeln?

    Antworten Teilen
  5. von JenZ am 04.12.2012 (12:21Uhr)

    schlimmer gehts immer @tethi schau mal ins golem forum ;)
    egal wie konstruktiv man da etwas schreibt, es gibt immer einen der es da besser weiß oder dich disst ...

    Zum Thema: ich frage mich wozu man das braucht ... also WIRKLICH braucht? Setzt das irgendjemand ein? (abgesehen vielleicht von den Text-Bubbles)
    Dank Sprites die einmal geladen werden kann man doch x-beliebige Icons da rein packen und in der Größe wie man sie braucht, sind sie auch nicht viel größer als der Hickhack mit dem CSS da oben (der vor allem nur in neueren Browsern funktioniert).

    Antworten Teilen
Deine Meinung

Bitte melde dich an!

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden

Mehr zum Thema CSS
Magic kurz vorgestellt: Animate.css für Anwendungsentwickler
Magic kurz vorgestellt: Animate.css für Anwendungsentwickler

Wir haben bereits über die CSS-Bibliothek animate.css berichtet. Wer noch mehr und vor allem andere Animations-Effekte benötigt, der sollte sich die Beta von Magic ansehen. » weiterlesen

CSS-Stylesheets asynchron nachladen – so gehts!
CSS-Stylesheets asynchron nachladen – so gehts!

Häufig benötigt ihr einen Teil des CSS nicht gleich zu Beginn des ersten Seitenaufrufs. Wir stellen euch ein kleines Snippet vor, das ein asynchrones Nachladen von CSS-Dateien ermöglicht. » weiterlesen

Modular und hackbar: Wie du den Open-Source-Browser Breach individuell anpassen kannst
Modular und hackbar: Wie du den Open-Source-Browser Breach individuell anpassen kannst

Mit Breach gibt es einen neuen Open-Source-Browser, dessen Oberfläche vollständig in JavaScript geschrieben wurde. Dank der modularen Natur des Browsers soll sich das Interface per JavaScript und … » weiterlesen

Kennst Du schon unser t3n Magazin?

t3n-Newsletter t3n-Newsletter
Top-Themen der Woche für Web-Pioniere
Jetzt kostenlos
anmelden
Diesen Hinweis verbergen