CSS-Dreieck

HTML

Man kann sie mit einem einzigen Div erstellen. Es ist gut, Klassen für jede Richtungsoption zu haben.

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

CSS

Die Idee ist eine Box mit null Breite und Höhe. Die tatsächliche Breite und Höhe des Pfeils wird durch die Breite des Rahmens bestimmt. Bei einem Pfeil nach oben ist beispielsweise der untere Rahmen farbig, während der linke und rechte transparent sind, was das Dreieck bildet.

.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; 
}

Demo

Siehe den Stift Animation zur Erklärung von CSS-Dreiecken von Chris Coyier (@chriscoyier) auf CodePen.

Beispiele

Dave Everitt schreibt in

Für ein gleichseitiges Dreieck lohnt es sich zu erwähnen, dass die Höhe 86,6% der Breite beträgt, also (border-left-width + border-right-width) * 0,866 % = border-bottom-width