Driehoeken kun je heel eenvoudig maken met CSS. Je hoeft dus geen afbeeldingen te gebruiken om driehoeksvormen op je website te plaatsen.
De border eigenschap
Met behulp van deze eigenschap is het heel eenvoudig om driehoeken te maken op je website. Wanneer je namelijk een blok (een div) op je website plaatst, en je geeft dit blok aan alle vier zijden een randje met de border eigenschap, dan worden komen deze randen in de hoeken schuin bij elkaar (zie afb.).
Wanneer je nu het blok een breedte en hoogte van 0px geeft en je geeft de randen een breedte van bijvoorbeeld 100px dan krijg je aan alle vier zijden dus een mooie driehoeksvorm.
Om nu één driehoeksvorm daadwerkelijk te tonen, moet je er voor zorgen dat de andere drie driehoeksvormen niet getoond worden. Dit kun je regelen door ze transparant te maken.
In de onderstaande video zie je precies hoe dit allemaal werkt. En ik laat je in de video zien hoe je artikelteksten op je website mooier kunt maken met driehoeken.
Een driehoek met de punt naar beneden
Om een driehoek met de punt naar beneden te maken, maak je de randen aan de linkerzijde, rechterzijde en onderzijde transparant.
.driehoek {
width:0px;
height:0px;
border-top:solid 100px red;
border-right:solid 100px transparent;
border-bottom:solid 100px transparent;
border-left:solid 100px transparent;
}
Een driehoek met de punt naar boven
Om een driehoek met de punt naar boven te maken, maak je de randen aan de linkerzijde, rechterzijde en bovenzijde transparant.
.driehoek {
width:0px;
height:0px;
border-top:solid 100px transparent;
border-right:solid 100px transparent;
border-bottom:solid 100px red;
border-left:solid 100px transparent;
}
Een driehoek met de punt naar rechts
Om een driehoek met de punt naar rechts te maken, maak je de randen aan de bovenzijde, rechterzijde en onderzijde transparant.
.driehoek {
width:0px;
height:0px;
border-top:solid 100px transparent;
border-right:solid 100px transparent;
border-bottom:solid 100px transparent;
border-left:solid 100px red;
}
Een driehoek met de punt naar links
Om een driehoek met de punt naar links te maken, maak je de randen aan de rechterzijde, onderzijde en bovenzijde transparant.
.driehoek {
width:0px;
height:0px;
border-top:solid 100px transparent;
border-right:solid 100px red;
border-bottom:solid 100px transparent;
border-left:solid 100px transparent;
}
Driehoeken gebruiken in Joomla
In de onderstaande video zie je hoe je met CSS driehoeken in Joomla bijvoorbeeld je artikelen kunt verfraaien.
Driehoeken gebruiken in Wordpress
En uiteraard mag ook een video over het gebruik van CSS driehoeken in Wordpress niet ontbreken: