CSS und CSS3 implementieren Zeichendreieckselemente

Dieser Artikel stellt hauptsächlich die Implementierung von CSS und CSS3 zum Zeichnen von Dreieckselementen vor. Jetzt kann ich ihn mit Ihnen teilen.

Gelegentlich das Frontend Die Seite muss über ein Dreieckssymbol oder einen Dreiecksstil verfügen. Heutzutage werden die Dreiecke von Symbolen meist mit Schriftartsymbolen implementiert. Einige große Dreiecksmodule müssen jedoch immer noch mit CSS-Stilen gezeichnet werden Code für verschiedene Blickwinkel. Ich hoffe, er kann für alle nützlich sein >2: Dreieck nach unten

#triangle-up {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid red;
}

3: Dreieck nach links

#triangle-down {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 100px solid red;
}

4 : Dreieck-rechts

#triangle-left {
    width: 0;
    height: 0;
    border-top: 50px solid transparent;
    border-right: 100px solid red;
    border-bottom: 50px solid transparent;
}

5: :dreieck-oben-links

#triangle-right {
    width: 0;
    height: 0;
    border-top: 50px solid transparent;
    border-left: 100px solid red;
    border-bottom: 50px solid transparent;
}

6: Dreieck-oben-rechts

#triangle-topleft {
    width: 0;
    height: 0;
    border-top: 100px solid red;
    border-right: 100px solid transparent;
}

7: Dreieck-unten-links

#triangle-topright {
    width: 0;
    height: 0;
    border-top: 100px solid red;
    border-left: 100px solid transparent; 
}

8: Dreieck- Unten rechts:

#triangle-bottomleft {
    width: 0;
    height: 0;
    border-bottom: 100px solid red;
    border-right: 100px solid transparent;
}

Das Obige ist der gesamte Inhalt dieses Artikels. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website. Verwandte Empfehlungen:

CSS3 zum Erzielen von Neigungs- und Rotationsanimationseffekten

Das obige ist der detaillierte Inhalt vonCSS und CSS3 implementieren Zeichendreieckselemente. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!