Cet article présente principalement comment utiliser CSS pour créer un triangle compatible avec tous les navigateurs. Il a une certaine valeur de référence. Les amis intéressés peuvent s'y référer. J'espère qu'il vous sera utile !
Utilisez CSS pour écrire des triangles, compatible avec IE7
.arrow-up {
width:0px;
height:0px;
border-left:10px solid transparent;
border-right:10px solid transparent;
border-bottom:10px solid red;
font-size:0px;
line-height:0px;
margin: 0 auto;
}
.arrow-down {
width:0px;
height:0px;
border-left:10px solid transparent;
border-right:10px solid transparent;
border-top:10px solid blue;
font-size:0px;
line-height:0px;
}
.arrow-left {
width:0px;
height:0px;
border-bottom:10px solid transparent;
border-top:10px solid transparent;
border-right:10px solid #DC143C;
font-size:0px;
line-height:0px;
}
.arrow-right {
width:0px;
height:0px;
border-bottom:10px solid transparent;
border-top:10px solid transparent;
border-left:10px solid #FF00FF;
font-size:0px;
line-height:0px;
}
L'effet est le suivant :
Ce qui précède est le résumé de cet article. C'est tout. J'espère que vous l'aimerez tous.
【Tutoriels associés recommandés】
1. Tutoriel vidéo CSS
2 Manuel en ligne CSS
3. tutoriel bootstrap
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
