Reines CSS zur Implementierung eines kleinen Pfeil- oder Dreieckslogos

Als Front-End-Ingenieur ist es unvermeidlich, während der Arbeit CSS zu verwenden, um einige kleine Pfeile, Dreiecke und andere Zeichen zu erstellen. Jetzt werde ich Ihnen zeigen, wie Sie mit reinem CSS kleine Pfeile, Dreiecke und andere Zeichen erstellen.

Kleine Pfeile implementieren:

.arrow{
    width: 20px;
    height: 20px;
    margin-top: 50px;
    margin-left: 50px;
    border-top: 1px solid #000;
    border-left: 1px solid #000;
    transform: rotate(45deg);/*旋转角度*/
}
<div class="arrow"></div>

Dreiecke implementieren:

.triangle{
    width: 0;
    height: 0;
    border-width: 100px;
    border-style: solid;
    border-color: red transparent transparent transparent;
    transform:rotate(45deg);
}
<div class="triangle"></div>

(Kostenloses Video-Tutorial: CSS-Video-Tutorial)

Wie werden mehrere Elemente in einer Zeile angezeigt?

(1) display: inline wandelt Elemente in Inline-Elemente um, aber die Attribute width und height haben keine Auswirkung

(2) display: inline-block ermöglicht die Anzeige von Elementen in einer Zeile, wird jedoch durch Leerzeichen und beeinflusst Zeilenumbrüche. Es wird einen Standardabstand geben

Lösung:

1 Entfernen Sie die Auswirkungen von Leerzeichen und Zeilenumbrüchen, sodass sich die Beschriftungen alle in einer Zeile befinden (diese Methode wird nicht empfohlen, da sie nicht lesbar ist)

2 . Anzeige hinzufügen: inline-block Fügen Sie dem übergeordneten Element des Attributelements ein Attribut „font-size:0

display:inline-block在ie6 7下不兼容的解决办法？
dispaly:inline;//css hack ie浏览器可以识别
zoom:1;//触发css hack的layout

“ hinzu CSS-Tutorial

Das obige ist der detaillierte Inhalt vonReines CSS zur Implementierung eines kleinen Pfeil- oder Dreieckslogos. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!