So zeichnen Sie ein Dreieck mit der CSS-Eigenschaft border

Rahmen zum Zeichnen von Dreiecken zu verwenden, ist eigentlich eine seltsame Fähigkeit.

verwendet eine Funktion des Rahmens: Wenn die Breite und Höhe eines Elements beide 0 sind, legen Sie die Breite des Rahmens fest (legen Sie die Breite von mindestens zwei benachbarten Rändern fest) und Die Grenze wird dieses Element stützen.

Wenn gleichzeitig die Breite der vier Ränder festgelegt wird, laufen die vier Seiten schließlich in einem Punkt in der Mitte des Elements zusammen.

Wenn wir also einen Rand für ein Element mit Breite und Höhe festlegen, werden die vier Ränder diagonal statt im rechten Winkel verbunden. Wie im Bild gezeigt:

Die Breite und Höhe sind also nicht festgelegt, was vier ergibt Wenn die Ränder jeweils auf unterschiedliche Farben eingestellt sind, können Sie 4 Dreiecke mit unterschiedlichen Farben und unterschiedlichen Richtungen erhalten:

Wenn Sie ein Dreieck erstellen möchten, können Sie keinen separaten Rahmen festlegen. Wenn Sie nur einen Rahmen festlegen, handelt es sich nur um eine Linie mit nur Breite und keiner Höhe , und kann nicht auf der Seite angezeigt werden.

Daher müssen Sie immer noch 4 Ränder gleichzeitig festlegen oder die Breite von zwei benachbarten Rändern festlegen und nur einem eine Farbe hinzufügen der Ränder:

4 Kanten festlegen:

Nur ​​zwei benachbarte Kanten festlegen:

Das obige ist der detaillierte Inhalt vonSo zeichnen Sie ein Dreieck mit der CSS-Eigenschaft border. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!