CSS et CSS3 implémentent des éléments de triangle de dessin

Cet article présente principalement l'implémentation de CSS et CSS3 pour dessiner des éléments triangulaires. Il a une certaine valeur de référence. Maintenant, je le partage avec vous. Les amis dans le besoin peuvent s'y référer

De temps en temps, le front-end. La page doit avoir une icône triangulaire. De nos jours, les triangles des icônes sont principalement implémentés à l'aide d'icônes de police. Cependant, certains grands modules triangulaires doivent encore être dessinés à l'aide de styles CSS sur le front-end. code pour différents angles. J'espère que cela pourra être utile à tout le monde Aide

1 : triangle vers le haut

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

2 : triangle vers le bas

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

3 : triangle vers la gauche

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

4 : triangle-droit

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

5 : :triangle-hautgauche

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

6 : triangle en haut à droite

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

7 : triangle en bas à gauche

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

8 : triangle - en bas à droite :

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

Ce qui précède est l'intégralité du contenu de cet article. Pour plus de contenu connexe, veuillez prêter attention à. le site Web PHP chinois.

Recommandations associées :

CSS3 pour obtenir des effets d'animation d'inclinaison et de rotation

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!