1.左箭头
html: <div class="a"></div>
style:
.a {
width: .3rem;
height: .3rem;
border-top: 2px solid #e6e6e6;
border-right: 2px solid #e6e6e6;
transform: rotate(225deg)
}
2.右箭头
html: <div class="a"></div>
style:
.a {
width: .3rem;
height: .3rem;
border-top: 2px solid #e6e6e6;
border-right: 2px solid #e6e6e6;
transform: rotate(45deg)
}
3. 实心箭头
html: <div class="a"></div>
style:
.a {
width: 0;
height: 0;
border-width: 20px;
border-style: solid;
border-color: red #000 blue gray;
}
所以想要什么箭头直接更改border-color即可,添加 transparent 。
比如左箭头 border-color: transparent transparent transparent #000 ;
4.三角形
div {
border: 6px solid #fff;
border-top: none; /*去掉会变成原本的宽高12*/
border-right-color: transparent;
border-bottom-color: transparent;
}