Voor mijn eigen CMS zocht ik naar een pijltje omhoog en een pijltje omlaag. Wilde je vroeger zo’n pijltje of driehoekje op je website, dan was je genoodzaakt in een grafisch programma een driehoekje te tekenen en het grafische bestandje vervolgens in je webpagina te plaatsen. Inmiddels heb ik ontdekt dat veel professionele websites dit rechtstreeks met CSS doen.
Een driehoekje maak je met CSS als volgt. Je neemt een blok zonder hoogte en breedte. Vervolgens definieer je randen (borders), waarbij je (voor een pijltje naar beneden) de bovenste rand een kleur geeft en de overige randen transparant maakt. In code:
width: 0px;
height: 0px;
border-top: 5px solid black;
border-left: 5px solid transparant;
border-right: 5px solid transparant;
border-bottom: 5px solid transparant;
Alleen de bovenrand is in deze CSS opmaak zichtbaar. De schuine kanten links en rechts worden veroorzaakt doordat twee randen die haaks op elkaar staan schuin worden afgesneden. De transparante linker- en rechterrand snijden de bovenrand dus links en rechts schuin af.
Het resultaat is een driehoekje met de punt naar beneden, 10px breed (twee keer de breedte van de randen) en 5px hoog.