Nehmen Sie mit, um mit verschiedenen Richtungspfeilen in CSS zu spielen

Beim Entwickeln einer Seite stoße ich auf viele Listen, die die Verwendung von Pfeilen erfordern. Sie können auch reines CSS verwenden, und es gibt keine Kompatibilitätsbedenken. Im Vergleich dazu funktioniert CSS3 besser als Bilder.

Prinzip: Ein Quadrat mit gleicher Höhe und Breite, wählen Sie eine Seite aus, die Sie benötigen, und schneiden Sie sie ab. Wenn Höhe und Breite 0 sind und die anderen Seiten transparent sind, wird es ein Trapez sein sei ein Dreieck. Es kommt heraus

Trapezcode:

html:
<div class="arrow"></div>
css:
arrow{
width:10px;
height:10px;
border:10px solid #000;
border-left-color:orange;
}

Setzen Sie die Höhe und Breite auf 0, und die anderen Seiten sind transparente Farben und die Dreieck kommt heraus:

html:
<div class="arrow"></div>
css:
arrow{
width:0;
height:0;
border: 10px solid transparent;
border-left-color: orange;//左箭头
}

In der Entwicklung können Sie Pseudoklassen verwenden, um die Implementierung zu positionieren, ohne die Dom-Struktur zu ändern, was einfach und elegant ist. Der Inhalt gibt die Position des Dreiecks an.

html:
<div class="arrow">文字文字</div>
css:
div{
position:relative;
arrow{
width:0;
height:0;
border: 10px solid transparent;
border-left-color: orange;
position:absolute;
content:&#39;&#39;;
}

Da wir uns nun dem Grafikdesign widmen, gibt es eine andere Art von dreieckigen Linienpfeilen, die beliebter ist.
Setzen Sie zwei Pseudoklassen ein >Vielen Dank an alle fürs Lesen, ich hoffe, dass Sie viel davon profitieren werden.
Dieser Artikel ist reproduziert von: https://blog.csdn.net/qq_34250472/article/details/55513862

Empfohlenes Tutorial: „

CSS-Tutorial

“

Das obige ist der detaillierte Inhalt vonNehmen Sie mit, um mit verschiedenen Richtungspfeilen in CSS zu spielen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!