Een achtpuntige ster tekenen met CSS

De achtpuntige ster 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 vierkanten, verdraai er één over 45° en leg ze op elkaar.
• De vierkanten worden getekend door een border te leggen rond een box met hoogte en breedte van 0px. Het vierkant ontstaat door de rand, die even breed is als de helft van het vierkant.
• In dit voorbeeld is de border 30px breed. De vierkanten zijn dus 60px × 60px.
  N.B.: De font-size moet gelijk zijn aan nul,
• Eén van de vierkanten wordt over 45° gedraaid. Daarvoor gebruik je:
  transform: rotate(45deg) translateZ(0).
  De translateZ-functie is nodig voor sommige oude browsers.
  Voor sommige webkit-browsers zijn nog vendor prefixes nodig.
   
• Om de twee vierkanten bij (lees: op) elkaar te houden worden ze samen gebracht in een wrapper. Dat is een <div>-tag met id="wrapper". Die wordt ook gebruikt om de ster in het document te positioneren.
  De afmetingen van de wrapper zijn 60px × 60px. Dat is gelijk aan 2 × de breedte van de border waarmee de twee afzonderlijke vierkanten zijn gemaakt. Het gedraaide vierkant steekt buiten de wrapper uit, maar dat geeft niet.
• De vierkanten zijn in de wrapper absoluut gepositioneerd on de linker bovenhoek:
  position:absolute; top:0; left:0;.
   
• Een achtpuntige ster in je document opnemen
• De ster bovenaan deze bladzijde is gemaakt met deze code:
   
  <div id="wrapper">
<span id="steracht_1"></span>
<span id="steracht_2"></span>
</div>
  N.B.: Binnen de drie <div>-tags mag geen tekst of andere HTML-code staan, ook geen spaties.
   
• De bijbehorende CSS luidt:
  <style>
#wrapper {
  position:relative; top:0; left:0;
  width:60px;
  height:60px;
  margin:20px auto 20px auto;
}
#steracht_1 {  /* Vierkant */
  position:absolute; top:0; left:0;
  width:0; height:0; font-size:0;
  border:30px solid teal;
}
#steracht_2 { /* Vierkant, gedraaid */
  position:absolute; top:0; left:0;
  width:0; height:0; font-size:0;
  border:30px solid teal;
  transform:rotate(45deg) translateZ(0);
}
</style>
   
• Tenslotte
• De figuren zijn altijd "gevuld". Het is met deze aanpak niet mogelijk om alleen contouren te maken.

Downloaden:
 
Druk op de knop:  File: voorb418.zip, 577 bytes.