Vierhoeken tekenen met CSS I: Ruit

Hieronder zie je twee figuurtjes die veel lijken op de kleur "ruiten" van het kaartspel. In de wiskunde noemt men zo'n figuur een Ruit.

Deze ruiten zijn 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 elkaar, zoals hier rechts.
• Het maken van een driehoek wordt uitgebreid besproken in het item Driehoeken tekenen met CSS. Dat wordt hier niet herhaald.
• Voor deze toepassing gebruik je pijlen met de punt naar links resp. naar rechts. Deze zet je elk in een <span>-tag, die verwijst naar de id's waarin de CSS van de driehoeken staat.
• Noodzakelijk is dat de bases van de driehoeken even lang zijn. Dat regel je met border-left en border-right.
• Deze <span>-tags mogen verder geen inhoud bevatten.
• In de id's waarmee de driehoeken zijn getekend is de font-size op nul gezet. Dit is gedaan om zeker te stellen dat de driehoeken niet worden afgeknot tot een trapezium.
• Om de ruit in je document te positioneren zet je de twee <span>-tags samen in een HTML-element. Op deze bladzijde is dat gedaan met <p>-tags, maar het kan ook in een <table> of in een <div>.
   
• Een ruit in je document opnemen
• De ruiten bovenaan deze bladzijde zijn gemaakt met deze code:
   
  <p style="text-align:center; padding:30px 0">
  <span id="arrow-left-1"></span><span id="arrow-right-1"></span>
 
  &nbsp; &nbsp; &nbsp; <!-- Ruimte tussen de ruiten -->
 
  <span id="arrow-left-2"></span><span id="arrow-right-2"></span>
</p>  
• Er mag geen HTML-code tussen de twee <span>-tags staan, ook geen spaties.
• De CSS van de id's staat in downloadfile.
   
• Tenslotte
• De figuren zijn altijd "gevuld". Het is met deze aanpak niet mogelijk om alleen contouren te maken.