CSS - 绘制箭头

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>

参考

https://www.jianshu.com/p/251edd5c3b59