文章目录
CSS - 绘制箭头
通过 border 样式实现
初始化一个容器:
<div style="display: flex; align-items: center; justify-content: center;">
<span style="width: 0; height: 0; border: 50px solid; border-color: red green blue black;"></span>
</div>
通过隐藏其他 border
的颜色,就可以达到只显示某一方向的箭头的效果:
<div style="display: flex; align-items: center; justify-content: center;">
<span style="width: 0; height: 0; border: 50px solid; border-color: transparent transparent transparent black;"></span>
</div>
还可以通过修改其他方向的 border
,达到变形的效果:
<div style="display: flex; align-items: center; justify-content: center;">
<span style="width: 0; height: 0; border: 50px solid; border-top: 20px solid; border-bottom: 20px solid; border-color: transparent transparent transparent black;"></span>
</div>