CSS

实现倒三角小图标的css方法

基本原理

1
2
3
4
5
6
7
8
.one {
width: 0;
height: 0;
border-top: 40px solid #000;
border-right: 40px solid #ff0000;
border-left: 40px solid #ff0000;
border-bottom: 40px solid #000;
}

这个的效果是由四个相等的三角形拼成的正方形

根据这个设置想要的图形，如倒三角即是没有下边框，左右透明

1
2
3
4
5
6
7
8
.caret {
display: inline-block;
width: 0;
height: 0;
border-top: 4px solid;
border-right: 4px solid transparent;
border-left: 4px solid transparent;
}