HTML
Sie können sie mit einem einzigen div machen. Es ist schön, Klassen für jede Richtungsmöglichkeit zu haben.
CSS
Die Idee ist eine Box mit einer Breite und Höhe von Null. Die tatsächliche Breite und Höhe des Pfeils wird durch die Breite des Rahmens bestimmt. In einem Aufwärtspfeil ist beispielsweise der untere Rand farbig, während links und rechts transparent sind und das Dreieck bilden.
.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
Sehen Sie sich die Stiftanimation zur Erklärung von CSS-Dreiecken von Chris Coyier (@chriscoyier) auf CodePen an.
Beispiele
Dave Everitt schreibt in:
Für ein gleichseitiges Dreieck ist darauf hinzuweisen, dass die Höhe 86,6% der Breite beträgt, also (Rand-Links-Breite + Rand-Rechts-Breite) * 0,866% = Rand-Boden-Breite