Zeshoeken tekenen met CSS

De zeshoek hierboven is helemaal gemaakt met CSS. Er komen geen plaatjes of JavaScript aan te pas. Op deze bladzijde wordt uitgelegd hoe je zoiets maakt. De code van het voorbeeld kun je downloaden om zelf mee aan de slag te gaan.

• Het trucje
• Het is eenvoudiger dan het lijkt: Maak twee driehoeken en plaats die met de basis tegen een rechthoek, zoals hier rechts.
• Het maken van een driehoek wordt uitgebreid besproken in het item Driehoeken tekenen met CSS. Dat wordt hier niet herhaald.
• De driehoeken hebben een tophoek van 120°, en twee hoeken van elk 30°. Dit is noodzakelijk om een regelmatige zeshoek te krijgen. Deze driehoeken zijn elk verdeeld in twee (deel-)driehoeken met hoeken van 90°, 60° en 30°.
• De 'verticale' rechthoekszijde van deze driehoeken (border-right resp. border-left) en de 'horizontale' rechthoekszijde (border-top en border-bottom) verhouden zich tot elkaar als de tangens van 60 ° = 1 : √3.
• Bij het inbouwen in je website moet je deze verhouding aanhouden, anders krijg je geen 'echte' zeshoek.
• √3 is ongeveer gelijk aan 1,73. Dat maakt het moeilijk om een exacte zeshoek te maken. De afwijkingen zijn echter klein, dus een kniesoor die er op let.
   
• De rechthoek is een element waarvan de height, width en font-size alle drie gelijk zijn aan nul.
• De border-top en border-bottom (rood) zijn gelijk aan elkaar en zijn gelijk aan de halve hoogte van de figuur.
• border-left en border-right (blauw) zijn samen gelijk aan de breedte van de rechthoek. Ze hoeven niet gelijk te zijn aan elkaar. Op deze pagina is dat wel zo. Je kunt eventueel één van beide weglaten (en is dan dus nul).
   
• De drie onderdelen moet je positioneren te opzichte van elkaar met:
    position:relative; top:0; left:0;
  Zie ook de code hier onder.
• Zorg dat de driehoeken samen een even aantal pixels hoog zijn. Dan passen de drie onderdelen zonder hoogteverschillen aan elkaar.
   
• Een zeshoek in je document opnemen
• De zeshoek bovenaan deze bladzijde is gemaakt met deze code:
   
  <p style="text-align:center; padding:30px 0 40px 0">
<span id="zeshoek-left"></span>
<span id="zeshoek-mid"></span>
<span id="zeshoek-right"></span>
</p>
  N.b.: Binnen de drie <span>-tags mag geen tekst of HTML-code staan, ook geen spaties.
  Dat geldt ook tussen de drie <span>-tags.
   
• De bijbehorende CSS luidt:
  #zeshoek-left {   /* Pijl naar links */
  position:relative; top:0; left:0;
  width:0; height:0; font-size:0;
  border-bottom:35px solid transparent;
  border-top:35px solid transparent;
  border-right:20px solid teal;
}
#zeshoek-mid {   /* Blokje in het midden */
  position:relative; top:0; left:0;
  width:0; height:0; font-size:0;
  border-top:35px solid teal;
  border-bottom:35px solid teal;
  border-left:20px solid teal;
  border-right:20px solid teal;
}
#zeshoek-right {   /* Pijl naar rechts */
  position:relative; top:0; left:0;
  width:0; height:0; font-size:0;
  border-bottom:35px solid transparent;
  border-top:35px solid transparent;
  border-left:20px solid teal;
}
   
• De code van de andere figuurtjes staat in de downloadfile.
   
• Tenslotte
• De figuren zijn altijd "gevuld". Het is met deze aanpak niet mogelijk om alleen contouren te maken.

Downloaden:
 
Druk op de knop:  File: voorb416.zip, 754 bytes.