Methode 1: Verwenden Sie den Rand, um den Rand festzulegen. Das Element hat Höhe und Breite
<i class="triangle"></i>
.triangle {
transform: rotate(45deg);
display: block;
width: 12px;
height: 12px;
border: 1px solid #9e9e9e;
border-top-color: transparent;
border-right-color: transparent;
background-color: #fff;
}Effekt:
Verwenden Sie das Transformationsattribut, um das Dreieck zu drehen, um den gewünschten Effekt zu erzielen.
Methode 2: Rahmen zur Unterstützung des Dreiecks verwenden
<i class="triangle"></i>
.triangle {
display: block;
position: absolute;
width: 0;
border-width: 6px;
border-color: transparent transparent red;
border-style: dashed dashed solid;
top: -12px;
right: 76px;
}Wirkung:
Anwendungsszenario: Klicken Sie auf 234 oder klicken Sie, um das Dreieck auszuwählen, das auf die entsprechende Option zeigt
Tipps:
1. Lernen Sie, häufig Pseudoelemente wie after oder before zu verwenden, um Dreiecke umzusetzen
2. Der Unterschied zwischen den beiden Methoden: Die von der zweiten Methode festgelegte Dreieckshintergrundfarbe und die von der zweiten Methode festgelegte Rahmenfarbe sind dieselben Die erste Methode ist dieselbe wie die Randfarbe. Die Farben der Ränder können unterschiedlich sein. Die Methode muss entsprechend den Auswirkungen verschiedener Anwendungsszenarien ausgewählt werden.
Mit der zweiten Methode können auch unterschiedliche Effekte der Hintergrundfarbe und der Randfarbe erzielt werden, indem zwei Dreiecksabdeckungen mit unterschiedlichen Farben verwendet werden.
Das obige einfache Beispiel für die Verwendung von CSS zur Erzielung des Dreieckseffekts ist der gesamte vom Herausgeber geteilte Inhalt. Ich hoffe, dass er Ihnen eine Referenz geben kann, und ich hoffe, dass Sie die chinesische PHP-Website unterstützen.
Ausführlichere Beispiele für die Erzielung von Dreieckseffekten mit CSS und verwandte Artikel finden Sie auf der chinesischen PHP-Website!
