this article mainly introduces how to use css to create a triangle that is compatible with all browsers. it has certain reference value. interested friends can refer to it. i hope it will be helpful to you!
use css to write triangles, compatible with 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;
}
the effect is as follows:
the above is this article that’s all. i hope you all like it.
【recommended tutorials】
1. css video tutorial
2. css online manual
3. bootstrap tutorial
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
