CSS实现标签箭头

箭头"/>

CSS实现标签箭头

基本原理

原理非常简单，通过截取border(边框)的部分“拐角”实现，几行CSS代码即可理解

三角形

绘制箭头，首先应该懂得如何用纯CSS绘制三角形。我们先做一个宽高为0，有边框的div看一看效果。

.box{width: 0;height: 0;border: 50px solid;border-color: red yellow green blue;}
<div class="box"></div>

效果如下

由此发现，如果将其中三边变透明，则可以形成一个任意方向的三角形（实现手法：border-color:transparent）

任意角度的三角形

已知三角形原理的情况下，只需通过改变边框宽度来改变三角形的角度
代码示例

<div id="demo14"></div><style>
#demo14 {border: 10px solid transparent;border-left: 20px solid #f00;width: 0;he