Cirkels en ellipsen tekenen met CSS
Hieronder zie je een cirkel en een ellips. Die zijn gemaakt met CSS. Er komt geen plaatje en/of JavaScript aan te pas.
Op deze pagina wordt uitgelegd hoe je zoiets maakt.
- De basis
- De beide figuren worden gemaakt met behulp van een rechthoek met een rand. Je maakt dus een class met een breedte (width) en een hoogte (height).
- De figuur teken je door een rand (border) toe te voegen. Het lijntype moet solid zijn.
- Hier is de rand 15px breed gemaakt. Voor de kleur is zeegroen (teal) genomen.
- De hoekpunten rond je af met een straal (border-radius)) van 50%.
- N.B.: Je bent niet gebonden aan pixels om de afmetingen mee te bepalen. Je kunt alle maateenheden gebruiken die in CSS mogelijk zijn.
- N.B.: De rand ligt altijd buiten de rechthoek die je maakt met width en height. Dat is te
omzeilen door box-sizing:border-box in de CSS op te nemen.
- De cirkel
- Ga uit van een vierkant. De waarden van width en height zijn dus gelijk. Hier is 100px gebruikt.
- De diameter van de cirkel is gelijk aan de waarde van height + 2 × de breedte van de rand. Dit, omdat
de rand van de cirkel buiten de figuur ligt.
De diameter van de cirkel is dus 100px + 2 × 15px = 130px.
- De ellips
- Ga uit van een rechthoek. De waarden van width en height zijn dus niet aan elkaar gelijk. Hier is 100px gebruikt voor height, width is 150px.
- De lange as van de ellips is hier gelijk aan de waarde van width + 2 × de breedte van de rand. Dit, omdat
de rand van de ellips buiten de figuur ligt.
De lange as van de ellips is dus 150px + 2 × 15px = 180px. - De korte as van de ellips is hier gelijk aan de waarde van height + 2 × de breedte van de rand. Dit, omdat
de rand van de ellips buiten de figuur ligt.
De korte as van de ellips is dus 100px + 2 × 15px = 130px.
- N.B.: Als width groter is dan height krijg je een "liggende" ellips, zoals in het
voorbeeld. Als width kleiner is dan height krijg je een "staande" ellips.
Als width en height aan elkaar gelijk zijn krijg je een cirkel, maar dat wist je al...
Tenslotte...
De hierboven besproken vormen kun je gemakkelijk inkleuren door ze een achtergrondkleur te geven. Neem die kleur gelijk aan
de kleur van de rand:
background-color: teal. In dit voorbeeld staat die in de klasse vullen. Het resultaat zie je hier.
Gebruik:
De figuren positioneer je in je document door extra CSS toe te voegen. Hier is dat gedaan in twee klassen links en
rechts. Daarbij zijn de figuren in een aparte <div>-tag gezet. Het style-attribuut in die tag zorgt
er voor dat de figuren netjes in het midden staan en dat document-tekst niet door de figuren loopt.
- De CSS-code staat in de <HEAD>.
- De code voor de cirkel en/of ellips staat in de <BODY>.
De code van het voorbeeld ziet er als volgt uit:
(Zet dit in de <HEAD>).
<style>
.cirkel { width:100px; height:100px; border-radius:50%;
border:15px solid teal; }
.ellips { width:150px; height:100px; border-radius:50%;
border:15px solid teal; }
.vullen { background-color:teal }
.links { float:left }
.rechts{ float:right }
</style>
(Code voor de "open" cirkel en ellips.
Zet dit in de <BODY> op de plaatjs waar je het nodig hebt).
<div style="width:400px; margin:20px auto 180px auto">
<div class="cirkel links"></div>
<div class="ellips rechts"></div>
</div>
(Code voor de "opgevulde" cirkel en ellips.
Zet dit in de <BODY> op de plaatjs waar je het nodig hebt).
<div style="width:400px; margin:20px auto 180px auto">
<div class="cirkel vullen links"></div>
<div class="ellips vullen rechts"></div>
</div>
