Driehoeken tekenen met CSS
Hieronder zie je vier driehoeken. Die zijn getekend met CSS. Er komen geen plaatjes of JavaScript aan te pas.
Op deze pagina wordt uitgelegd hoe je dat doet.
- Het trucje
- De aanpak berust op oneigenlijk gebruik van de CSS-eigenschap border. Rond drie zijden een element van 0 × 0 px wordt een brede border gelegd. Twee daarvan zijn transparant. De derde heeft een kleur.
- De aansluiting van borders bij (scherpe) hoekpunten is altijd afgeschuind. Het zichtbare (dus niet-transparante) deel van
de border is dus afgeschuind door de twee transparante borders. Zo ontstaat de driehoek.
Hier rechts staat een voorbeeld, waarbij transparantie is vervangen door geel (links) en bruin (rechts). - De breedte van de gekleurde border bepaalt de hoogte van de driehoek.
- De breedte van de transparante borders bepaalt de lengte van de basis van de driehoek.
- Door de manier waarop de bovenstaande driehoeken zijn gemaakt (nl. alle drie de borders even breed) ontstaat een gelijkbenige driehoek met tophoek van 90° en twee hoeken van elk 45°.
- Door een beetje te spelen met de breedte van de drie borders kun je de driehoek van vorm veranderen. De vormen hieronder zijn gemaakt op basis van de "pijl" omhoog, zie hieronder. De id's verwijzen naar de styles in de download-file.
| id= | up0 | up1 | up2 | up3 | up4 | up5 | up6 | up7 |
| border-left | 20px | 0 | 20px | 10px | 20px | 10px | 3px | 15px |
| border-right | 20px | 20px | 0 | 20px | 10px | 10px | 3px | 5px |
| border-bottom | 20px | 20px | 20px | 20px | 20px | 20px | 20px | 30px |
- Een driehoek in je document opnemen
- Je maakt een driehoek met een id of class in CSS, op de manier die hierboven is beschreven.
- Op de plaats in je document zet je een <div>-tag met een verwijzing naar de id of class in de CSS.
- De <div>-tag moet verder leeg blijven.
- De CSS-code van de driehoek hier rechts is:
#up1 {width:0; height:0;
border-left:0 solid transparent; /* afschuining links */
border-right:20px solid transparent; /* afschuining rechts */
border-bottom:20px solid teal; /* onderkant, border met kleur */
} - In je document zet je de <div>-tag, met een in-line style waarmee je de driehoek positioneert:
<div id="up1" style="float:right; margin-left:20px"></div>
- Tip: Als je een driehoek wilt maken, bepaal dan eerst welke "basisvorm" het beste past bij wat je wilt: Punt naar boven / beneden / links / rechts, zie bovenaan in dit document. Neem daarvan de code en pas die aan aan je wensen.
- De basisvormen staan in de downloadfile, met de id's:
#arrow-up, #arrow-down, #arrow-left en #arrow-right.
- Tenslotte
- De driehoeken zijn altijd "gevuld". Het is met deze aanpak niet mogelijk om alleen contouren te maken.
Downloaden:
Druk op de knop:
File: voorb410.zip, 854 bytes.
Opmerking:
Door twee driehoeken met de basis tegen elkaar te leggen kun je een aantal vierhoeken maken, die geen rechthoek of vierkant
zijn. Denk daarbij aan een ruit, een trapezium of een parallogram. Zie Vierhoeken
tekenen met CSS I: Ruit, Vierhoeken tekenen met CSS II: Parallellogram
en Vierhoeken tekenen met CSS III: Trapezium.
