© 2013 mm|creative – Mediengestaltung

CSS / Design / Do it Yourself / Grafik / Projects / Tipps und Tricks

Teil 3: Figuren gestalten mit CSS – Mehrecke und Sterne

- 25. Januar 2013

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. Heute witmen wir uns den Fünfecken, Sechsecken, Achtecken und den Sternen.
Ausgangslage ist für uns immer ein Container <div id="???"></div> mit der jeweiligen ID (zum Beispiel #stern5) im unteren Kasten.

[divider] [one_half]

5-Zack-Stern

[tabs] [tab title =“Figur“]
[/tab] [tab title =“CSS-Code“]
#stern5 {
margin: 50px 0;
position: relative;
display: block;
color: #ffcc00;
width: 0px;
height: 0px;
border-right: 100px solid transparent;
border-bottom: 70px solid #ffcc00;
border-left: 100px solid transparent;
-moz-transform: rotate(35deg);
-webkit-transform: rotate(35deg);
-ms-transform: rotate(35deg);
-o-transform: rotate(35deg);
}
#stern5:before {
border-bottom: 80px solid #ffcc00;
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);
}
#stern5:after {
position: absolute;
display: block;
color: #ffcc00;
top: 3px;
left: -105px;
width: 0px;
height: 0px;
border-right: 100px solid transparent;
border-bottom: 70px solid #ffcc00;
border-left: 100px solid transparent;
-webkit-transform: rotate(-70deg);
-moz-transform: rotate(-70deg);
-ms-transform: rotate(-70deg);
-o-transform: rotate(-70deg);
content: '';}
[/tab] [/tabs][/one_half][one_half_last]

6-Zack-Stern

[tabs] [tab title =“Figur“]
[/tab] [tab title =“CSS-Code“]

#stern6 {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid #ffcc00;
position: relative;
}
#stern6:after {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid #ffcc00;
position: absolute;
content: "";
top: 30px;
left: -50px;
}
[/tab] [/tabs] [/one_half_last] [clearboth][divider] [one_half]

8-Zack-Stern

[tabs] [tab title =“Figur“]
[/tab] [tab title =“CSS-Code“]

#stern8 {
background: #ffcc00;
width: 80px;
height: 80px;
position: relative;
text-align: center;
-webkit-transform: rotate(20deg);
-moz-transform: rotate(20deg);
-ms-transform: rotate(20deg);
-o-transform: rotate(20eg);
}
#stern8:before {
content: "";
position: absolute;
top: 0;
left: 0;
height: 80px;
width: 80px;
background: #ffcc00;
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-ms-transform: rotate(135deg);
-o-transform: rotate(135deg);
}
[/tab] [/tabs][/one_half][one_half_last]

12-Zack-Stern

[tabs] [tab title =“Figur“]
[/tab] [tab title =“CSS-Code“]

#stern12 {
background: #ffcc00;
width: 80px;
height: 80px;
position: relative;
text-align: center;
}
#stern12:before, #stern12:after {
content: "";
position: absolute;
top: 0;
left: 0;
height: 80px;
width: 80px;
background: #ffcc00;
}
#stern12:before {
-webkit-transform: rotate(30deg);
-moz-transform: rotate(30deg);
-ms-transform: rotate(30deg);
-o-transform: rotate(30deg);
}
#stern12:after {
-webkit-transform: rotate(60deg);
-moz-transform: rotate(60deg);
-ms-transform: rotate(60deg);
-o-transform: rotate(60deg);
}
[/tab] [/tabs] [/one_half_last] [clearboth][divider] [one_half]

Fünfeck

[tabs] [tab title =“Figur“]
[/tab] [tab title =“CSS-Code“]

#fuenfeck {
position: relative;
width: 54px;
border-width: 50px 18px 0;
border-style: solid;
border-color: #ffcc00 transparent;
}
#fuenfeck:before {
content: "";
position: absolute;
height: 0;
width: 0;
top: -85px;
left: -18px;
border-width: 0 45px 35px;
border-style: solid;
border-color: transparent transparent #ffcc00;
}
[/tab] [/tabs] [/one_half] [one_half_last]

Sechseck

[tabs] [tab title =“Figur“]
[/tab] [tab title =“CSS-Code“]
#sechseck {
width: 100px;
height: 55px;
background: #ffcc00;
position: relative;
}
#sechseck:before {
content: "";
position: absolute;
top: -25px;
left: 0;
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 25px solid #ffcc00;
}
#sechseck:after {
content: "";
position: absolute;
bottom: -25px;
left: 0;
width: 0;
height: 0;
border-left:
50px solid transparent;
border-right: 50px solid transparent;
border-top: 25px solid #ffcc00;
}
[/tab] [/tabs][/one_half_last] [clearboth][divider] [one_half]

Achteck

[tabs] [tab title =“Figur“]
[/tab] [tab title =“CSS-Code“]

#achteck {
width: 100px;
height: 100px;
background: #ffcc00;
position: relative;
}
#achteck:before {
content: "";
position: absolute;
top: 0;
left: 0;
border-bottom: 29px solid #ffcc00;
border-left: 29px solid #FEFEFE;
border-right: 29px solid #FEFEFE;
width: 42px;
height: 0;
}
#achteck:after {
content: "";
position: absolute;
bottom: 0;
left: 0;
border-top: 29px solid #ffcc00;
border-left: 29px solid #FEFEFE;
border-right: 29px solid #FEFEFE;
width: 42px;
height: 0;
}
[/tab] [/tabs] [/one_half] [one_half_last]

Diamant

[tabs] [tab title =“Figur“]
[/tab] [tab title =“CSS-Code“]
#diamant {
border-style: solid;
border-color: transparent transparent #ffcc00 transparent;
border-width: 0 25px 25px 25px;
height: 0;
width: 50px;
position: relative;
margin: 20px 0 50px 0;
}
#diamant:after {
content: "";
position: absolute;
top: 25px;
left: -25px;
width: 0;
height: 0;
border-style: solid;
border-color: #ffcc00 transparent transparent transparent;
border-width: 70px 50px 0 50px;
}
[/tab] [/tabs][/one_half_last] [clearboth][divider]

Im vierten und letzten Teil wirds dann kreativ. Wir wollen schauen, welche Figuren möglich sind und was mit CSS alles gestaltbar ist. Bleiben Sie uns treu.

Lesen Sie hierzu auch:

2 responses

  1. Jonas sagt:

    probiere die Fihuren grade für meinen online-shop als Button umzusetzen. Was mich interessieren würde: wie bekomme ich hier einen text in die mitte des Sterns? Bei mir überlagern die _after, bzw. :before Kästen den Text…

    1. Michael sagt:

      Hallo Jonas. Wenn Du einen Stern mit Text haben willst, musst Du das etwas aufwendiger gestalten. Dann kommst Du mit dem hier gezeigten Code nicht weit.

      Du müsstest ein Tag verwenden, welches noch Child-Tags enthält, zum Beispiel:


      <div>
          <span></span>
          <p>Hier Dein Text</p>
          <span></span>
      </div>

      So erhälst Du ein Element, welches weitere :before und :after akzeptiert.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Ich akzeptiere