Einführung in das Zeichnen eines Dreiecks mit CSS

Ich habe in einem Interview eine Frage gesehen, in der es darum ging, wie man mit CSS ein Dreieck zeichnet.

Wie wir alle wissen, können viele Formen in Dreiecke aufgeteilt werden. Wenn Sie also wissen, wie man Dreiecke zeichnet, können Sie viele interessante Formen zeichnen

Das Prinzip beim Zeichnen eines Dreiecks besteht darin, die Breite, den Linienstil und die Farbe des Randes in vier Richtungen anzupassen.

Wenn Sie die Breite ausreichend vergrößern und die Farben in verschiedene Richtungen ändern, können Sie feststellen, dass der Rand des Boxmodells aus vier trapezförmigen Linien besteht.

Wenn Sie zu diesem Zeitpunkt die Höhe und Breite innerhalb des Boxmodells auf 0 Pixel anpassen, wird ein Dreieck gebildet.

border:100px solid transparent 　　//边框100px，实线，透明颜色，下面三行代码等同于此句
border-width:15px;　　　　　　　　//border-width代表所有方向的border
border-style:solid;
border-color:transparent；

Wenn Sie das Prinzip verstehen, sollten Sie jetzt in der Lage sein, den Code selbst zu schreiben.

width: 0;
    height: 0;
    border-left: 50px solid transparent;　　　　//左边宽度50px，实线，透明颜色
    border-right: 50px solid transparent;　　　　//右边同上
    border-top: 100px solid red;　　　　　　　　//上边宽度100px，实线，红色

Der obige Code kann ein nach unten gerichtetes Dreieck erzeugen. Wie im Bild unten gezeigt (ich habe die Farbe rechts zum besseren Verständnis ersetzt) ​​

Aus dieser Darstellung können wir ersehen, dass wir zum Erzeugen eines Dreiecks drei Ränder benötigen.

Die Höhe des linken und rechten Randes bestimmt, wie lang das Dreieck ist.

Die Höhe des Dreiecks wird durch die Breite des Rahmens selbst bestimmt

Wie erzeugt man also ein Dreieck, das nach rechts unten oder links unten usw. zeigt?

Ich glaube, Sie haben es bereits auf dem Bild oben gesehen.

Wir brauchen nur zwei Grenzen.

width: 0;
height: 0;
border-top: 100px solid red;
border-right: 100px solid transparent;

Dieser Code generiert ein nach links unten zeigendes Dreieck mit einer Basis und einer Höhe von 100 Pixeln.

Erinnern Sie sich an die Randbreite?

Es kann die Breite von vier Rändern mit einer Codezeile definieren.

Das obige ist der detaillierte Inhalt vonEinführung in das Zeichnen eines Dreiecks mit CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!