纯css制作各种小箭头和三角形
需求一:不用图片,只用css实现各种上下左右的箭头
思路
- 先写一个只有右border、下border的带颜色的反 “ L ” ,内容部分由padding撑起来,然后根据css3的rotate属性进行各种旋转,实现上 下 左 右四个方向的箭头
//html部分,此处的arrow就是所有旋转的基础
<span class="arrow"></span>
<span class="arrow up"></span>
<span class="arrow down"></span>
<span class="arrow left"></span>
<span class="arrow right"></span>
//css部分
.arrow {
border: solid black;
border-width: 0 2px 2px 0;
display: inline-block;
padding: 6px;
}
.<