CSS, um einen Dreieckseffekt zu erzielen

Methode 1: Verwenden Sie border, 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;
}

Wirkung:

Verwenden Sie das Transformationsattribut, um das Dreieck zu drehen, um den gewünschten Effekt zu erzielen.

Methode 2: Verwenden Sie Rahmen, um Dreiecke zu unterstützen

<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 zu implementieren

2. Der Unterschied zwischen den beiden Methoden: Die Hintergrundfarbe des Dreiecks und die Rahmenfarbe, die mit der zweiten Methode festgelegt wurden, können unterschiedlich sein bestimmt entsprechend den Auswirkungen verschiedener Anwendungsszenarien. Wählen Sie eine Methode.

Mit der zweiten Methode können auch unterschiedliche Effekte der Hintergrundfarbe und der Randfarbe erzielt werden, indem zwei Dreiecksabdeckungen mit unterschiedlichen Farben verwendet werden.