Teil 4: Figuren gestalten mit CSS – Was ist noch möglich?

Dass man mit CSS nicht nur Schriften einfärben und Hintergründe definieren kann, das ist weitgehend bekannt. Was aber wirklich mit CSS möglich ist, das ist noch nicht sonderlich gut aufgezeigt. Daher haben wir uns dazu entschlossen, hier einige Tipps und Tricks zu geben, wie wir mit CSS gestalten können und uns kreativ austoben können.

Im ersten Teil berichteten wir über die Grundformen wie Quadrate, Rechtecke, Kreise und Ovale. Im zweiten Teil gingen wir auf die Gestaltung von Dreiecken näher ein. Thema des dritten Teils waren Mehrecke bzw. Sterne. Heute Lassen wir es krachen. Sprechblasen, Herzen, ja sogar Mattscheiben sind möglich.
Ausgangslage ist für uns immer ein Container <div class="???"></div> mit dem jeweiligen Klassennamen (zum Beispiel #stern5) im unteren Kasten.

Sprechblase

• Figur
• CSS-Code

#sprechblase {
 width: 120px; 
 height: 80px; 
 background: #ffcc00;
 position: relative; 
 -moz-border-radius: 10px; 
 -webkit-border-radius: 10px; 
 border-radius: 10px; 
 } 
#sprechblase:before { 
content:""; 
position: absolute; 
right: 100%; 
top: 26px; 
width: 0; 
height: 0; 
border-top: 13px solid transparent; 
border-right: 26px solid #ffcc00; 
border-bottom: 13px solid transparent; 
}

liegende Acht / endlose Schleife

• Figur
• CSS-Code

#liegende_acht { 
position: relative; 
width: 212px; 
height: 100px; 
 } 
#liegende_acht:before, #liegende_acht:after { 
content: ""; position: 
absolute; top: 0; 
left: 0; 
width: 60px; 
height: 60px; 
border: 20px solid #ffcc00; 
-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); 
} 
#liegende_acht: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); 
}

Herz

• Figur
• CSS-Code

#herz { 
 position: relative; 
 width: 100px; 
 height: 90px; 
} 
#herz:before, #herz:after {
 position: absolute; 
 content: ""; 
 left: 50px; 
 top: 0; 
 width: 50px; 
 height: 80px; 
 background: #ffcc00; 
 -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%; 
 } 
#herz: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%; 
 }

Pacman

• Figur
• CSS-Code

#pacman { 
 width: 0px; 
 height: 0px; 
 border-right: 
 60px solid transparent; 
 border-top: 60px solid #ffcc00; 
 border-left: 60px solid #ffcc00; 
 border-bottom: 60px solid #ffcc00; 
 border-top-left-radius: 60px; 
 border-top-right-radius: 60px; 
 border-bottom-left-radius: 60px; 
 border-bottom-right-radius: 60px; }

alter Bildschirm

• Figur
• CSS-Code

#tv {
 position: relative;
 width: 200px;
 height: 150px;
 margin: 20px 0;
 background: #ffcc00; 
 border-radius: 50% / 10%;
 color: FCFDFD; 
 text-align: center; 
 text-indent: .1em;
 } 
#tv:before {
 content: ''; 
 position: absolute; 
 top: 10%; 
 bottom: 10%; 
 right: -5%; 
 left: -5%; 
 background: inherit; 
 border-radius: 5% / 50%; 
 }

Lupe

• Figur
• CSS-Code

#lupe {
 font-size: 10em;
 display: inline-block; 
 width: 0.4em; 
 height: 0.4em; 
 border: 0.1em solid #ffcc00; 
 position: relative; 
 border-radius: 0.35em; 
 } 
 
 #lupe::before { 
 content: ""; 
 display: inline-block; 
 position: absolute; 
 right: -0.25em; 
 bottom: -0.1em; 
 border-width: 0; 
 background: #ffcc00; 
 width: 0.35em; 
 height: 0.08em; 
 -webkit-transform: rotate(45deg); 
 -moz-transform: rotate(45deg); 
 -ms-transform: rotate(45deg); 
 -o-transform: rotate(45deg); }
 

Lesen Sie hierzu auch:

• Teil 1: die Grundformen
• Teil 2: Dreiecke
• Teil 3: Mehrecke und Sterne
• Teil 4: Was ist noch möglich?