I nogle situationer, kan man ønske at lave en trekant med CSS. Det kunne f.eks. være, hvis man vil lave en talebobbel, hvor trekanten kan sættes på siden, så den peger mod den som siger noget. Herunder finder du koden til en trekant. Du kan se en demo om, hvordan det egentlig fungere her.

Først skal vi lave lidt HTML

<div class="arrow-up"></div>
<div class="arrow-down"></div>
<div class="arrow-left"></div>
<div class="arrow-right"></div>

Og så lidt CSS

.arrow-up {
  width: 0; 
  height: 0; 
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  
  border-bottom: 5px solid black;
}

.arrow-down {
  width: 0; 
  height: 0; 
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  
  border-top: 20px solid #f00;
}

.arrow-right {
  width: 0; 
  height: 0; 
  border-top: 60px solid transparent;
  border-bottom: 60px solid transparent;
  
  border-left: 60px solid green;
}

.arrow-left {
  width: 0; 
  height: 0; 
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent; 
  border-right:10px solid blue; 
}

Denne snippet blev indsendt af Kompli.dk

---