Es gibt dreieckige Unicode-Zeichen. Man könnte ein Dreieck in SVG zeichnen. Aber es gibt noch einen anderen Weg, ein Dreieck im Web darzustellen, der nichts weiter als die Border-Eigenschaft und ein wenig CSS-Trickerei erfordert.
Stellen Sie sich ein Element mit einem dicken Rahmen (Border) vor
.triangle {
width: 200px;
height: 200px;
border: 10px solid black;
}
Stellen Sie sich nun vor, alle vier Rahmenseiten hätten unterschiedliche Farben
.triangle {
...
border-left-color: red;
border-right-color: yellowgreen;
border-top-color: orange;
border-bottom-color: rebeccapurple;
}
Fällt Ihnen auf, wie die Rahmen in Winkeln aufeinandertreffen?
Schauen Sie, was passiert, wenn wir die Breite und Höhe des Elements auf Null reduzieren
.triangle {
...
width: 0;
height: 0;
}
Wenn drei dieser Rahmenseiten transparent wären, hätten wir ein Dreieck!
.triangle {
...
border-left-color: transparent;
border-right-color: transparent;
border-top-color: transparent;
border-bottom-color: rebeccapurple;
}
Schön.
Dies könnte nützlich sein, zum Beispiel für eine Text-Sprechblase mit Zeiger. In diesem Fall könnten Sie das Dreieck über ein Pseudo-Element zu einem anderen Element hinzufügen. Hier ist ein vollständiges Beispiel
