Een zespuntige ster tekenen met CSS

De zespuntige 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.

Een ster als deze wordt ook wel "Davidsster" genoemd.

• Het trucje
• Het is eenvoudiger dan het lijkt: Maak twee gelijkzijdige driehoeken, één met de punt omhoog en één met de punt omlaag. Leg die twee driehoeken over elkaar heen.
• Het maken van een driehoek wordt uitgebreid besproken in het item Driehoeken tekenen met CSS. Dat wordt hier niet herhaald.
• De drie hoeken zijn elk 60°. Denk deze driehoeken elk verdeeld in twee (deel-)driehoeken met hoeken van 90°, 60° en 30°.
• Eenvoudig is in te zien dat de hoogte van een gelijkzijdige driehoek zich verhoudt tot de lengte van de basis als 2 : √3 = 1,155.
  Van de twee driehoeken is de basis (= border-left + border-right) gelijk genomen aan 60px. De hoogte (border-bottom en border-top) is nu elk gelijk aan 52px.
• Bij het inbouwen in je website moet je deze verhouding aanhouden, anders krijg je geen 'echte' zeshoekige ster.
   
• Je positioneert de twee driehoeken door ze horizontaal te verschuiven, over de helft van de basis, dus 30px. De driehoek met de pijl naar boven schuift naar links ( left:30px; ), de andere schuift naar rechts( left:-30px; ).
  Verder moet je de drihoeken verticaal verschuiven, en wel over ⅔ van de hoogte. De hoogte is 52 px, dus de verschuiving is ⅔ × 52px = 35px. De driehoek met de punt naar boven verschuif je naar beneden: top:-35px;. De andere driehoek verschuif je naar boven: top:35px;.
• Uiteraard zijn alle verschuivingen ten opzichte van het element zelf: position:relative;. Zie ook de code hier onder.
   
• Een zespuntige ster in je document opnemen
• De ster bovenaan deze bladzijde is gemaakt met deze code:
   
  <p style="text-align:center; padding:30px 0 40px 0">
<span id="sterzes-up"></span>
<span id="sterzes-down"></span>
</p>
  N.b.: Binnen de twee <span>-tags mag geen tekst of HTML-code staan, ook geen spaties.
  Dat geldt ook tussen de twee <span>-tags.
   
• De bijbehorende CSS luidt:
  #sterzes-up { /* Pijl naar boven*/
  position:relative; top:-35px; left:30px;
  width:0; height:0; font-size:0;
  border-bottom:52px solid teal;
  border-left:30px solid transparent;
  border-right:30px solid transparent;
}
#sterzes-down { /* Pijl naar beneden */
  position:relative; top:35px; left:-30px;
  width:0; height:0; font-size:0;
  border-top:52px solid teal;
  border-left:30px solid transparent;
  border-right:30px solid transparent;
}
   
• Tenslotte
• De figuren zijn altijd "gevuld". Het is met deze aanpak niet mogelijk om alleen contouren te maken.

Downloaden:
 
Druk op de knop:  File: voorb417.zip, 579 bytes.