Zeichnen Sie dreieckige Pfeile mit CSS

Zeichnen Sie dreieckige Pfeile mit CSS. Mit reinem CSS benötigen Sie nur sehr wenig Code, um dreieckige Pfeile zu erstellen, die mit verschiedenen Browsern kompatibel sind!

CSS-Code:

/* create an arrow that points up */
div.arrow-up {
    width: 0;
    height: 0;
    border-left: 5px solid transparent;  /* left arrow slant */
    border-right: 5px solid transparent; /* right arrow slant */
    border-bottom: 5px solid #2f2f2f; /* bottom, add background color here */
    font-size: 0;
    line-height: 0;
}
 
/* create an arrow that points down */
div.arrow-down {
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid #2f2f2f;
    font-size: 0;
    line-height: 0;
}
 
/* create an arrow that points left */
div.arrow-left {
    width: 0;
    height: 0;
    border-bottom: 5px solid transparent;  /* left arrow slant */
    border-top: 5px solid transparent; /* right arrow slant */
    border-right: 5px solid #2f2f2f; /* bottom, add background color here */
    font-size: 0;
    line-height: 0;
}
 
/* create an arrow that points right */
div.arrow-right {
    width: 0;
    height: 0;
    border-bottom: 5px solid transparent;  /* left arrow slant */
    border-top: 5px solid transparent; /* right arrow slant */
    border-left: 5px solid #2f2f2f; /* bottom, add background color here */
    font-size: 0;
    line-height: 0;
}

Der Schlüssel zum Zeichnen dieser Dreiecke besteht darin, dass die beiden Seiten in Pfeilrichtung dicke Ränder haben sollen. Die vom Pfeil abgewandte Seite hat ebenfalls den gleichen dicken Rand und die Farbe dieser Seite entspricht der Farbe Ihres Dreiecks. Je dicker der Rand, desto größer das Dreieck. Auf diese Weise können Sie Pfeile in verschiedenen Farben, Größen und Ausrichtungen zeichnen. Das Beste daran ist, dass Sie nur wenige Zeilen CSS-Code benötigen, um diesen Effekt zu erzielen.