用纯css实现箭头效果的代码关键是设：width 和 height 为 0

箭头效果

<style>
.arrow { display: inline-block; width: 0px; height: 0px; border: 30px solid transparent; overflow: hidden; }
/*向上箭头，只有三个边，不能指定上边框*/
.arrow-up { border-top: none; border-bottom-color: red; }
/*向下箭头 ，只有三个边，不能指定下边框*/
.arrow-down { border-bottom: none; border-top-color: orange; }
/*向左的箭头：只有三个边，不能指定左边框，向左三角形的高=上+下边框的长度。宽=右边框的长度*/
.arrow-left { border-left: none; border-right: 40px solid blue; }
/*向右的箭头：只有三个边，不能指定右边框。向右三角形的高=上+下边框的长度。宽=左边框的长度*/
.arrow-right { border-right: none; border-left: 40px solid green; }
</style>

<span class="arrow arrow-up"></span>
<span class="arrow arrow-down"></span>
<span class="arrow arrow-left"></span>
<span class="arrow arrow-right"></span>

 线性箭头效果：两个箭头重叠展示，第二个箭头小于第一个箭头，用颜色覆盖来展示线性箭头

<style>
.arrow-line { display: inline-block; width: 0; height: 0; border: 10px solid transparent; border-top-color: #000; /* position: relative; */ }
.arrow-b { float: left; border-width: 8px; border-top-color: #fff; margin-top: -10px; margin-left: -8px; /* position: absolute; top: 0; left: 0; */ }
</style>
<span class="arrow-line">
<span class="arrow-line arrow-b"></span>
</span>

css 箭头