Da wir ja jetzt offiziell bald in einem Zensurstaat leben und einige ja auch schon zurück zensieren dachte ich mir, wenn schon Zensur, dann bitte auch besonders.
Daher hier meine leichtgewichtige Version in reinem html/css, getestet in IE6+, FF2+, Chrome, Safari und Opera. Im IE6 ist die Demo nur mit Conditional Comments lauffähig und ohne die Rahmen, weil der IE6 diese nicht transparent darstellen kann. Alles ist natürlich xhtml und css valid.
Das ist keine Grafik? Wie geht das?
Der html Teil
Zunächst brauchen wir mal ein Grundgerüst, mit drei Farben. Schwarz, weiß und rot (mit der Schrift).
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div id="stop">
<div id="stop_black">
<div class="top"></div>
<div class="middle"></div>
<div class="bottom"></div>
</div>
<div id="stop_white">
<div class="top"></div>
<div class="middle"></div>
<div class="bottom"></div>
</div>
<div id="stop_red">
<div class="top"></div>
<div class="middle">STOP!</div>
<div class="bottom"></div>
</div>
</div>
Der css Teil
Mit etwas CSS bilde ich mal zur Demonstration nur das rote Achteck ab.
2
3
4
5
#stop_red {position:absolute;width:400px;height:400px;margin:13px;border:0;}
#stop_red div {height:0;line-height:0%;margin:0;padding:0;border:100px solid transparent;font-size:0;}
#stop_red .top {border-bottom:100px solid red;border-top:0;}
#stop_red .bottom {border-top:100px solid red;border-bottom:0;}
#stop_red .middle {font:110px Arial Black,Arial,sans-serif;background:red;color:#fff;height:200px;line-height:200px;text-align:center;border:0;}
Es erhält dadurch eine achteckige Form
Simpel, hm? Mit Hilfe von CSS erzeuge ich noch weitere Achtecke, die minimal größer sind und schichte sie mit position:absolute übereinander. Hier noch mal auf einer einzelnen Seite, damit Ihr den Quelltext nachvollziehen könnt.