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.
Die Rolle des Applet-Tags in HTML
Eine vollständige Liste häufig verwendeter öffentlicher DNS
So öffnen Sie eine Bak-Datei
PS-Tastenkombinationen für Helligkeit und Kontrast
Lösung für Sitzungsfehler
Handy-Bildschirm tft
Der Unterschied zwischen statischen Webseiten und dynamischen Webseiten
Der Unterschied zwischen Pfeilfunktionen und gewöhnlichen Funktionen
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
