Vierhoeken tekenen met CSS II: Parallellogram

Hieronder zie je een figuur die lijkt op een scheef getrokken rechthoek. In de wiskunde noemt men zo'n figuur een Parallellogram.

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 rechthoek kan eventueel helemaal worden weggelaten, zie de figuur hier­naast. Het parallellogram bestaat dan uit alleen twee driehoeken.
   
• De drie onderdelen moet je positioneren te opzichte van elkaar met:
    position:relative; left:0;
  De eigenschap top stel je als volgt in:
  • Driehoek links: Zet top:0;
  • Rechthoek: Zet top gelijk aan minus de halve hoogte (border-top) van de linker driehoek.
  • Driehoek rechts: Zet top gelijk aan minus de hele hoogte (border-top) van de linker driehoek.
  Zie ook de code hier onder.
• Als je een rechthoek tussen de twee driehoeken nodig hebt, moet je zorgen dat de driehoeken een even aantal pixels hoog zijn. Dan passen de drie onderdelen zonder hoogteverschillen aan elkaar.
   
• Een parallellogram in je document opnemen
• het parallellogram bovenaan deze bladzijde is gemaakt met deze code:
   
  <p style="text-align:center; padding-top:80px">
<span id="par-left"></span>
<span id="par-mid"></span>
<span id="par-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:
  #par-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;   /* rechts, border met kleur */
}
#par-mid {   /* Blokje in het midden */
  position:relative; top:-35px; left:0;
  width:0; height:0; font-size:0;
  border:35px solid teal;
}
#par-right {   /* Pijl naar rechts */
  position:relative; top:-70px; left:0;
  width:0; height:0; font-size:0;
  border-bottom:70px solid transparent;   /* afschuining onder */
  border-left:50px solid teal;   /* links, border met kleur */
}
   
• De code van de andere figuurtjes staat in de downloadfile.
   
• Tenslotte
• De figuren zijn altijd "gevuld". Het is met deze aanpak niet mogelijk om alleen contouren te maken.

Downloaden:
 
Druk op de knop:  File: voorb414.zip, 843 bytes.