Ronde pijl met CSS
Hiernaast zie je pijlen met een ronde schacht. Die zijn helemaal getekend met CSS, zonder JavaScript of plaatjes te gebruiken. Op deze pagina wordt beschreven hoe je zoiets maakt. De code van de linker pijl staat onderaan de pagina. De code van beide pijlen kun je downloaden om zelf te gebruiken.
Inspiratie en bron: Webdesigner Magazine nr. 77 (juni 2015), pag. 59.
Dit blad wordt sinds november 2017 niet meer gemaakt.
De code heb ik aangepast om het ook in oudere browsers te laten werken. Daarnaast heb ik de afmetingen van de pijl groter
gemaakt om het beter zichtbaar te maken op het scherm. De pijl aan de rechterkant heb ik zelf toegevoegd.
- Er worden twee items besproken:
- De werking van het script.
- Inbouwen in je eigen site.
- De werking van het script
- Zie de HTML-code onderaan de bladzijde.
- De (linker) pijl wordt gemaakt met CSS; dat wordt geregeld vanuit de tag <div id="pijl1">.Deze tag mag verder geen tekst of andere tags bevatten.
- De pijl is opgenomen in een <div>-tag met een style-attribuut, die werkt als container. Deze
dient alleen om de pijl op de pagina te positioneren.
- De CSS voor #pijl1 bestaat uit twee stukken: De pijlpunt (#pijl1) en de kromme schacht (#pijl1:after).
- De pijl is relatief gepositioneerd t.o.v. de container. De breedte en hoogte zijn allebei 0.
- De pijlpunt is met top en left op de goede plaats gezet.
- De pijlpunt is getekend op de wijze die is beschreven in het item Driehoeken tekenen met CSS.
- De pijlpunt is 5° gedraaid met de klok mee.
- Voor de schacht is de pseudo-klasse after gebruikt. Door deze absoluut te positioneren ten opzichte van de pijlpunt verschijnt deze altijd op de goede plaats.
- Om de schacht te maken is een blok met een ellipsvormige afronding gebruikt, zie ook het item Cirkels en ellipsen tekenen met CSS.
- OOk hier is de figuur met de klok mee gedraaid, nu over 45°.
- De afmetingen van de pijlpunt en de schacht staan in een bepaalde verhouding tot elkaar.Je ziet 18:36 (= 1:2) en
36:48 (= 3:4). Deze verhoudingen zijn belangrijk voor deze uitvoering van de pijlen. Met andere verhoudingen
krijg je andere pijlen.
- Om de rechter pijl te maken (zie de downloadfile, id="pijl2"), hoef je in principe alleen left
te vervangen door right. De twee rotatie-hoeken vervang je door 360° − 5° = 355°, respectievelijk
360° − 45° = 315°.
- Inbouwen in je eigen site
- Download de code en zet hem in je HTML-bestand, zoals hieronder is aangegeven.
- Als je de grootte aan wilt passen moet je de bovengenoemde verhoudingen aanhouden, anders raakt alles in de war. Dat geldt ook als je de verdraaiing van de pijl wilt wijzigen.
- De kleur van de pijl kun kun je natuurlijk instellen zoals je zelf wilt.
Gebruik:
- De code staat gedeeltelijk in de <HEAD> en gedeeltelijk in de <BODY>.
De code van de linker pijl ziet er als volgt uit:
(Zet dit in de <HEAD>).
<style>
#pijl1 {
position: relative;
width:0; height:0;
top:10px; left:10px;
border-top:36px solid transparent;
border-right:36px solid teal;
transform:rotate(5deg);
}
#pijl1:after {
content:"";
position:absolute;
border:0 solid transparent;
border-top:18px solid teal;
border-radius:40px 0 0 0;
top:-48px; left:-36px;
width:48px; height:48px;
transform:rotate(45deg);
}
</style>
(Zet dit in de <BODY> op de plaats waar de pijl moet verschijnen).
<div style="float:left; margin:0 40px">
<div id="pijl1"></div>
</div>
Downloaden:
Druk op de knop:
File: voorb491.zip, 680 bytes.
