在日常开发的过程中,一些小图标,例如小箭头,都是比较常用的,最近看到了一个用CSS绘制小箭头的方法,但是对其实现原理不是很清楚,于是就探究了一下:
先贴一下绘制箭头的代码:
HTML:
<div class="container">
CSS模拟箭头:
<div class="css-arrow">
<div class="arrow"></div><br>
<div class="arrow-top"></div>
<div class="arrow-right"></div>
<div class="arrow-left"></div>
<div class="arrow-bottom"></div>
</div>
</div>
CSS:
.arrow