Driehoeken maken met CSS

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.

border hoeken

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;
}
driehoek met punt naar beneden

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;
}
driehoek met punt naar boven

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;
}
driehoek met punt naar rechts

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;
}
driehoek met punt naar links

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:

Plaats reactie

Beveiligingscode
Vernieuwen