Lav trekanter med CSS

Det er faktisk muligt at lave trekanter ved hjælp af CSS. Det er ret simpelt, det eneste der skal bruges er border attributten og et div element uden hverken højde eller bredde.

Og hvordan nu det? Jo, samlingerne i borders er vinklede, og det kan udnyttes til at lave trekanter. Lad os prøve det! Først laves der et div element og tilføjer en angle-border-example class:

<div class="angle-border-example"></div>
  

Og angle-border-example class ser sådan her ud:

.angle-border-example {
   width: 0px;
   height: 0px;
   border-top: 40px solid #ccdd88;
   border-bottom: 40px solid #88ccff;
   border-left: 40px solid #b4b4aa;
   border-right: 40px solid #34342b;
}

Tricket her er at width og height sættes til 0 pixels for det element som skal lave trekanten. Ovenstående vil således lave en firkant bestående af fire firkant som vist først på billedet:

Eksempel på hvordan borders kan bruges til at lave trekanter

Hvis vi så sætter en transparent baggrundsfarve på de sider som vi ikke ønsker at få vist, så har vi vores trekant. Her tilføjes en v3 class med transparent på top, right og bottom border, sådan at kun border-left bliver vist:

.angle-border-example.v3 {
   border-bottom: 40px solid transparent;
   border-top: 40px solid transparent;
   border-right: none;
}

Tilføj v3 class til vores div og vi får følgende grå trekant:

Eksempel på trekanter skabt vha. CSS borders. Her en left border.

Således kan man så sætte en af border siderne til at holde en farve og resten være transparente. Bemærk at man som minimum skal angive 2 border sider der ligger op af hinanden, f.eks. top og right eller bottom og left. Angives kun en border-side som transparent giver det en halv trekant som vist.

Check online demo af trekanterne her. Der er også vist en lille ekstra CSS3 der viser hvordan man benytter trekant tricket til at lave en spids “next button”.

Smid en kommentar

Felter markeret med * skal udfyldes og din e-mail-adresse vil ikke blive offentliggjort.