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 sol