CSS-Oktagon

Hier handelt es sich um dieselbe Konstruktion, nur sind hier die Rahmen für jedes div zur besseren Erkennbarkeit unterschiedlich gefärbt. Man kann leicht erkennen, dass alles mit borders realisiert wurde. Die farbig-punktierten Rechtecke dienen der Erklärung.

Grundsätzliches zum Prinzip:

Wir gehen von einem Element div mit relativ breitem Rahmen aus:

Jetzt verringern wir die Dimensionen des Elements auf 'Null' und verbreitern den Rahmen entsprechend:

Oder so:

Wenn wir nun dem Rahmen auf allen vier Seiten unterschiedliche Breiten geben, kann das so aussehen (in diesem Fall: 30px 60px 10px 20px):

Auch möglich, daß border nur an drei Seiten sichtbar ist (hier: 40px 60px 0 20px):

Im Extremfall ist die Rahmenbreite auf zwei Seiten (hier unten und links) gleich 'Null':

Wichtig ist, daß zwei rechtwinklig zueinander stehende borders sichtbar sind, sie unterstützen die Dimensionen in X- und in Y-Richtung. Zum Schluß verringern wir die Rahmenbreite etwas und geben unserem div wieder sichtbare Dimensionen:

Aus diesen beiden letzten Bausteinen in verschiedenen Größen wurde das ganze Kunstwerk oben aufgebaut.

Der Code:

Das Original-Style-Sheet für das Achteck, hier mit Kommentaren versehen:

/* Der Block, der das Ganze enthält, relativ positioniert */
#centerblock {
   line-height: 0px;
   background-color: #fff;
   padding: 0px;
   border: none;
   margin: 2em auto;
   position: relative;
   width: 650px;
   height: 494px;
   }
/* Von hier an ist alles absolut positioniert */
/* Die äußeren 'viereckigen' Rahmen, enthalten die acht dunklen Farbflächen */
#centerblock div.top-left-outer {           /* oben links, im Bild grün punktiert              */
   border-width: 76px 0 0 100px;
   top: 57px;
   left: 75px;
   }
#centerblock div.top-right-outer {          /* oben rechts */
   border-width: 76px 100px 0 0;
   top: 57px;
   right: 75px;
   }
#centerblock div.bottom-right-outer {       /* unten rechts */
   border-width: 0 100px 76px 0;
   bottom: 57px;
   right: 75px;
   }
#centerblock div.bottom-left-outer {        /* unten links */
   border-width: 0 0 76px 100px;
   bottom: 57px;
   left: 75px;
   }
#centerblock .outer {                       /* Deklarationen, die für alle vier vorhergehenden */
   border-style: solid;                     /* Klassen zutreffen. Wurden deshalb in eine       */
   position: absolute;                      /* Extra-Klasse ausgelagert.                       */
   width: 150px;
   height: 114px;
   }
/* Die inneren 'viereckigen' Rahmen, enthalten die acht hellen Farbflächen */
#centerblock div.top-left-inner {           /* oben links, im Bild  schwarz punktiert          */
   border-width: 76px 0 0 100px;
   top: 133px;
   left: 175px;
   }
#centerblock div.top-right-inner {          /* oben rechts */
   border-width: 76px 100px 0 0;
   top: 133px;
   right: 175px;
   }
#centerblock div.bottom-right-inner {       /* unten rechts */
   border-width: 0 100px 76px 0;
   bottom: 133px;
   right: 175px;
   }
#centerblock div.bottom-left-inner {        /*  unten links */
   border-width: 0 0 76px 100px;
   bottom: 133px;
   left: 175px;
   }
#centerblock .inner {                       /* Deklarationen, die für alle vier vorhergehenden */
   border-style: solid;                     /* Klassen zutreffen. Wurden deshalb in diese      */
   position: absolute;                      /* Extra-Klasse ausgelagert.                       */
   width: 50px;
   height: 38px;
   }
/* Die äußeren Dreiecke */
#centerblock .outside {                     /* Deklarationen, die für alle acht folgenden      */
   border-width: 0px;                       /* Klassen zutreffen. Auch diese wurden deshalb in */
   border-style: solid;                     /* einer Klasse zusammengefasst.                   */
   position: absolute;
   width: 0px;
   height: 0px;
   }
#centerblock .outside-top {
   border-top-width: 190px;
   top: 57px;
   }
#centerblock .outside-top-0 {
   border-bottom-width: 57px;
   top: 0px;
   }
#centerblock .outside-right {
   border-right-width: 250px;
   right: 75px;
   }
#centerblock .outside-right-0 {
   border-left-width: 75px;
   right: 0px;
   }
#centerblock .outside-bottom {
   border-bottom-width: 190px;
   bottom: 57px;
   }
#centerblock .outside-bottom-0 {
   border-top-width: 57px;
   bottom: 0px;
   }
#centerblock .outside-left {
   border-left-width: 250px;
   left: 75px;
   }
#centerblock .outside-left-0 {
   border-right-width: 75px;
   left: 0px;
   }
/* Die inneren Dreiecke */
#centerblock .inside {                      /* Deklarationen, die für alle acht folgenden      */
   border-width: 0px;                       /* Klassen zutreffen. Auch diese wurden deshalb in */
   border-style: solid;                     /* dieser Klasse zusammengefasst.                  */
   position: absolute;
   width: 0px;
   height: 0px;
   }
#centerblock .inside-top {
   border-top-width: 114px;
   top: 133px;
   }
#centerblock .inside-top-0 {
   border-bottom-width: 34px;
   top: 99px;
   }
#centerblock .inside-right {
   border-right-width: 150px;
   right: 175px;
   }
#centerblock .inside-right-0 {
   border-left-width: 45px;
   right: 130px;
   }
#centerblock .inside-bottom {
   border-bottom-width: 114px;
   bottom: 133px;
   }
#centerblock .inside-bottom-0 {
   border-top-width: 34px;
   bottom: 99px;
   }
#centerblock .inside-left {
   border-left-width: 150px;
   left: 175px;
   }
#centerblock .inside-left-0 {
   border-right-width: 45px;
   left: 130px;
   }
/* Die Dreiecke des Zentrums */
#centerblock .center {
   border-color: white;
   border-style: solid;
   position: absolute;
   width: 0px;
   height: 0px;
   }
#centerblock .top {
   border-width: 0 15px 38px;
   border-color: white yellow white fuchsia;
   width:100px;
   top: 209px;
   left: 260px;
   }
#centerblock .right {
   border-width: 11px 0 11px 50px;
   border-color: orange white aqua white;
   height:76px;
   bottom: 198px;
   right: 275px;
   }
#centerblock .bottom {
   border-width: 38px 15px 0;
   border-color: white lime white silver;
   width:100px;
   bottom: 209px;
   right: 260px;
   }
#centerblock .left {
   border-width: 11px 50px 11px 0;
   border-color: red white blue white;
   height:76px;
   top: 198px;
   left: 275px;
   }
/* Texte der Farben */
#centerblock div.maroon {
   color: #fff;
   background: maroon;
   top: 60px;
   left: 200px;
   }
#centerblock div.black {
   color: #fff;
   background: black;
   top: 60px;
   right: 200px;
   }
#centerblock div.olive {
   color: #fff;
   background: olive;
   top: 160px;
   right: 65px;
   }
#centerblock div.green {
   color: #fff;
   background: green;
   bottom: 160px;
   right: 65px;
   }
#centerblock div.teal {
   color: #fff;
   background: teal;
   bottom: 60px;
   right: 200px;
   }
#centerblock div.navy {
   color: #fff;
   background: navy;
   bottom: 60px;
   left: 200px;
   }
#centerblock div.gray {
   color: #fff;
   background: gray;
   bottom : 160px;
   left: 65px;
   }
#centerblock div.purple {
   color: #fff;
   background: purple;
   top: 160px;
   left: 65px;
   }
#centerblock div.red {
   color: #000;
   background: red;
   top: 140px;
   left: 250px;
   }
#centerblock div.orange {
   color: #000;
   background: orange;
   top: 140px;
   right: 250px;
   }
#centerblock div.yellow {
   color: #000;
   background: yellow;
   top: 195px;
   right: 175px;
   }
#centerblock div.lime {
   color: #000;
   background: lime;
   bottom: 195px;
   right: 175px;
   }
#centerblock div.aqua {
   color: #000;
   background: aqua;
   bottom: 140px;
   right: 250px;
   }
#centerblock div.blue {
   color: #fff;
   background: blue;
   bottom: 140px;
   left: 250px;
   }
#centerblock div.silver {
   color: #000;
   background: silver;
   bottom: 195px;
   left: 175px;
   }
#centerblock div.fuchsia {
   color: #000;
   background: fuchsia;
   top: 195px;
   left: 175px;
   }
#centerblock div.white {
   background: white;
   top: 229px;
   left: 295px;
   }
/* Andere Deklarationen für die Farbentexte */
.light {
   color: #fff;
   font: bold 13px monospace;
   }
.dark {
   color: #000;
   font: bold 13px monospace;
   }
.size {
   text-align: center;
   position: absolute;
   width: 60px;
   height: 2em;
   }

Das HTML für das Achteck:

<div id="centerblock">
<!--Rechtecke für die äußeren acht Farben-->
<div class="outer top-left-outer" style="border-color: maroon purple;"></div>
<div class="outer top-right-outer" style="border-color: black olive;"></div>
<div class="outer bottom-right-outer" style="border-color: teal green"></div>
<div class="outer bottom-left-outer" style="border-color: navy gray;"></div>
<!--Schräge Außenränder rund um das Achteck-->
<div class="outside outside-left outside-top-0" style="border-color: maroon white;"></div>
<div class="outside outside-top outside-left-0" style="border-color: white purple;"></div>
<div class="outside outside-right outside-top-0" style="border-color: black white;"></div>
<div class="outside outside-top outside-right-0" style="border-color: white olive;"></div>
<div class="outside outside-right outside-bottom-0" style="border-color: teal white;"></div>
<div class="outside outside-bottom outside-right-0" style="border-color: white green;"></div>
<div class="outside outside-left outside-bottom-0" style="border-color: navy white;"></div>
<div class="outside outside-bottom outside-left-0" style="border-color: white gray;"></div>
<!--Rechtecke für die inneren acht Farben-->
<div class="inner top-left-inner" style="border-color: red fuchsia;"></div>
<div class="inner top-right-inner" style="border-color: orange yellow;"></div>
<div class="inner bottom-right-inner" style="border-color: aqua lime;"></div>
<div class="inner bottom-left-inner" style="border-color: blue silver;"></div>
<!--Schräge Ränder zwischen den äußeren und den inneren acht Farben.-->
<div class="inside inside-left inside-top-0" style="border-color: red maroon;"></div>
<div class="inside inside-top inside-left-0" style="border-color: purple fuchsia;"></div>
<div class="inside inside-right inside-top-0" style="border-color: orange black;"></div>
<div class="inside inside-top inside-right-0" style="border-color: olive yellow;"></div>
<div class="inside inside-right inside-bottom-0" style="border-color: aqua teal;"></div>
<div class="inside inside-bottom inside-right-0" style="border-color: green lime;"></div>
<div class="inside inside-left inside-bottom-0" style="border-color: blue navy;"></div>
<div class="inside inside-bottom inside-left-0" style="border-color: gray silver;"></div>
<!--Weißes Achteck im Zentrum-->
<div class="center top"></div>
<div class="center bottom"></div>
<div class="center left"></div>
<div class="center right"></div>
<!--Beseichnungen der Farben mit Hintergrund- und Vordergrundfarben-->
<div class="maroon light size">maroon<br />#800000</div>
<div class="black light size">black<br />#000000</div>
<div class="olive light size">olive<br />#808000</div>
<div class="green light size">green<br />#008000</div>
<div class="teal light size">teal<br />#008080</div>
<div class="navy light size">navy<br />#000080</div>
<div class="gray light size">gray<br />#808080</div>
<div class="purple light size">purple<br />#800080</div>
<div class="red dark size">red<br />#ff0000</div>
<div class="orange dark size">orange<br />#ffa500</div>
<div class="yellow dark size">yellow<br />#ffff00</div>
<div class="lime dark size">lime<br />#00ff00</div>
<div class="aqua dark size">aqua<br />#00ffff</div>
<div class="blue dark size">blue<br />#0000ff</div>
<div class="silver dark size">silver<br />#c0c0c0</div>
<div class="fuchsia dark size">fuchsia<br />#ff00ff</div>
<div class="white dark size">white<br />#ffffff</div>
</div>