Vierhoeken tekenen met CSS III: Trapezium

Hieronder zie je een figuur die lijkt op een uit het verband getrokken rechthoek. In de wiskunde noemt men zo'n figuur een Trapezium.

Deze figuur is 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. Zet er zo nodig een rechthoek tussen.
• Het maken van een driehoek wordt uitgebreid besproken in het item Driehoeken tekenen met CSS. Dat wordt hier niet herhaald.
• De rechthoek is een element waarvan de height, width en font-size alle drie gelijk zijn aan nul.
• De border-top en border-bottom (rood) zijn gelijk aan elkaar en zijn gelijk aan de halve hoogte van de figuur.
• border-left en border-right (blauw) zijn samen gelijk aan de breedte van de rechthoek. Ze hoeven niet gelijk te zijn aan elkaar. Op deze pagina is dat wel zo. Je kunt eventueel één van beide weglaten (en is dan dus nul).
   
• De drie onderdelen moet je positioneren te opzichte van elkaar met:
    position:relative; left:0;
  De eigenschap top stel je als volgt in:
  • Driehoeken links en rechts: Zet top:0;
  • Rechthoek: Zet top gelijk aan minus de halve hoogte (border-top) van de linker driehoek.
  Zie ook de code hier onder.
• Zorg dat de driehoeken een even aantal pixels hoog zijn. Dan passen de drie onderdelen zonder hoogteverschillen aan elkaar.
   
• Een trapezium in je document opnemen
• het trapezium bovenaan deze bladzijde is gemaakt met deze code:
   
  <p style="text-align:center; padding-top:80px">
<span id="trap-left"></span>
<span id="trap-mid"></span>
<span id="trap-right"></span>
</p>
  N.b.: Binnen de drie <span>-tags mag geen tekst of HTML-code staan, ook geen spaties.
  Dat geldt ook tussen de drie <span>-tags.
   
• De bijbehorende CSS luidt:
  #trap-left {  /* Pijl naar links */
  position:relative; top:0; left:0;
  width:0; height:0; font-size:0;
  border-top:70px solid transparent;  /* afschuining boven */
  border-right:50px solid teal;  /* rechterkant, border met kleur */
}
#trap-mid {  /* Blokje in het midden */
  position:relative; top:-35px; left:0;
  width:0; height:0; font-size:0;
  border:35px solid teal;
}
#trap-right {  /* Pijl naar rechts */
  position:relative; top:0; left:0;
  width:0; height:0; font-size:0;
  border-top:70px solid transparent;  /* afschuining onder */
  border-left:100px solid teal;  /* linkerkant, border met kleur */
}
   
• De code van de andere figuurtjes staat in de downloadfile.
   
• Tenslotte
• Door border-left van #trap-right gelijk te nemen aan border-right van #trap-left ontstaat een regelmatig trapezium.
• De figuren zijn altijd "gevuld". Het is met deze aanpak niet mogelijk om alleen contouren te maken.

Downloaden:
 
Druk op de knop:  File: voorb415.zip, 819 bytes.