Zeichnen Sie Dreiecke durch CSS-Ränder

Dreiecke können durch den CSS-Rahmen gezeichnet werden. Verschiedene Stilkombinationen haben unterschiedliche Effekte und ihre Größe, Farbe und Richtung können gesteuert werden. Schauen Sie sich die verschiedenen Grafiken unten an. Ich glaube, es gibt noch viele weitere Grafiken, die Sie noch nie gesehen haben.

Schreiben Sie zuerst den öffentlichen Stil:

<span style="color: #008080;">1</span> <span style="color: #800000;">.border </span>{
<span style="color: #008080;">2</span> <span style="color: #ff0000;">    width</span>:<span style="color: #0000ff;"> 0</span>;
<span style="color: #008080;">3</span> <span style="color: #ff0000;">    height</span>:<span style="color: #0000ff;"> 0</span>;
<span style="color: #008080;">4</span>     
<span style="color: #008080;">5</span> <span style="color: #ff0000;">    border-color</span>:<span style="color: #0000ff;"> transparent</span>;
<span style="color: #008080;">6</span> <span style="color: #ff0000;">    border-width</span>:<span style="color: #0000ff;"> 1rem</span>;
<span style="color: #008080;">7</span> <span style="color: #ff0000;">    border-style</span>:<span style="color: #0000ff;"> solid</span>;
<span style="color: #008080;">8</span> }

Fügen Sie basierend auf dem obigen CSS den folgenden Kombinationscode hinzu, um die Richtung des Dreiecks zu steuern:

<span style="color: #008080;">1</span> <span style="color: #800000;">border-left-color: #000;</span>

<span style="color: #008080;">1</span> <span style="color: #800000;">border-right-color: #000;</span>

<span style="color: #008080;">1</span> <span style="color: #800000;">border-top-color: #000;</span>

<span style="color: #008080;">1</span> <span style="color: #800000;">border-bottom-color: #000;</span>

<span style="color: #008080;">1</span> <span style="color: #800000;">border-left-color: #000;
</span><span style="color: #008080;">2</span> <span style="color: #800000;">border-bottom-color: #000;</span>

<span style="color: #008080;">1</span> <span style="color: #800000;">border-right-color: #000;
</span><span style="color: #008080;">2</span> <span style="color: #800000;">border-bottom-color: #000;</span>

<span style="color: #008080;">1</span> <span style="color: #800000;">border-right-color: #000;
</span><span style="color: #008080;">2</span> <span style="color: #800000;">border-top-color: #000;</span>

<span style="color: #008080;">1</span> <span style="color: #800000;">border-left-color: #000;
</span><span style="color: #008080;">2</span> <span style="color: #800000;">border-top-color: #000;</span>

<span style="color: #008080;">1</span> <span style="color: #800000;">border-top-color: #000;
</span><span style="color: #008080;">2</span> <span style="color: #800000;">border-bottom-color: #000;</span>

<span style="color: #008080;">1</span> <span style="color: #800000;">border-left-color: #000;
</span><span style="color: #008080;">2</span> <span style="color: #800000;">border-right-color: #000;</span>

<span style="color: #008080;">1</span> <span style="color: #800000;">border-top-color: #000;
</span><span style="color: #008080;">2</span> <span style="color: #800000;">border-left-color: #000;
</span><span style="color: #008080;">3</span> <span style="color: #800000;">border-bottom-color: #000;</span>

<span style="color: #008080;">1</span> <span style="color: #800000;">border-top-color: #000;
</span><span style="color: #008080;">2</span> <span style="color: #800000;">border-left-color: #000;
</span><span style="color: #008080;">3</span> <span style="color: #800000;">border-right-color: #000;</span>

<span style="color: #008080;">1</span> <span style="color: #800000;">border-bottom-color: #000;
</span><span style="color: #008080;">2</span> <span style="color: #800000;">border-left-color: #000;
</span><span style="color: #008080;">3</span> <span style="color: #800000;">border-right-color: #000;</span>

<span style="color: #008080;">1</span> <span style="color: #800000;">border-top-color: #000;
</span><span style="color: #008080;">2</span> <span style="color: #800000;">border-right-color: #000;
</span><span style="color: #008080;">3</span> <span style="color: #800000;">border-bottom-color: #000;</span>

Und der folgende Effekt,

<span style="color: #008080;">1</span> <span style="color: #800000;">border-left-color: #000;
</span><span style="color: #008080;">2</span> <span style="color: #800000;">border-right-color: #000;
</span><span style="color: #008080;">3</span> <span style="color: #800000;">border-left-width: 3rem;</span>

Verschiedene Kombinationen erzeugen unterschiedliche Effekte. Sie können die Effekte verschiedener Kombinationen ausprobieren.