So zeichnen Sie ein Dreieck mit der CSS-Eigenschaft border

巴扎黑
Freigeben: 2017-07-17 15:06:05
Original
2606 Leute haben es durchsucht

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!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage