实心三角箭头:
i{
display: block;
width: 0;
height: 0;
position: relative;
border-color: transparent transparent transparent #000;
border-style: solid;
border-width: 7px 0px 7px 9px;
}
效果图:

空心三角箭头:
i{
display: block;
width: 0;
height: 0;
position: relative;
border-color: transparent transparent transparent #000;
border-style: solid;
border-width: 7px 0px 7px 9px;
}
i::before{
content: "";
border-color: transparent transparent transparent #fff;
border-style: solid;
border-width: 6px 0px 6px 8px;
position: absolute;
left: -9px;
top: -6px;
z-index: 1;
}
效果图:

本文介绍了如何使用纯CSS创建实心和空心的三角箭头,通过调整边框颜色和宽度实现不同效果。示例代码详细展示了实现方法,适用于网页布局和元素指向等场景。
1637

被折叠的 条评论
为什么被折叠?



