给某个div加一个小三角形
.div{
line-height: 50 / $p;
width: 140 / $p;## 标题
background: #F7F7F7;
position: relative;
font-size:18/$p;
color:#B3B3B3 ;
text-align: center;
border-radius: 10/$p;
}
.div::before {
//这里就是小三角了
content: "";
display: block;
position: absolute;
left: 55 / $p; //给小三角定位,更具实际需求调整
top: 50 / $p; //给小三角定位,更具实际需求调整
border-width: 10 / $p;
border-style: dashed dashed solid dashed; //四个参数分别代表向下,左,上右的小三角(对应方向的小三角设置为solid,其他的为dashed。我这里演示向下的小三角,所以设置第3个)
border-color:red transparent transparent transparent; //四个参数分别代表向下,左,上右的小三角。对应方向的小三角设置你想要的颜色(为了直观我这里设置红色),其他的为transparent。我这里演示向下的小三角,所以设置第1个。
}