使用css实现三角形箭头和空心箭头, 常用的使用场景:展开收起,下拉菜单
1.向下实心三角形:
html
<span class="arrow"></span>
css
.arrow {
position: relative;
}
.arrow:after {
position: absolute;
top: 50%;
right: -4px;
margin-top: -5px;
border: 6px solid;
border-color: transparent transparent #333 #333;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
opacity: 0.8;
content: '';
}
2.向上实心三角形
只需将旋转角度修改:
-webkit-transform: rotate(135deg);
transform: rotate(135deg);
3.向下的空心箭头:
html
<span class="arrow"></span>
css
.arrow:after {
content: '';
display: inline-block;
width: 6px;
height: 6px;
border-top: 2px solid #3D3D3D;
border-right: 2px solid #3D3D3D;
transform: rotate(135deg);
-webkit-transform: rotate(135deg);
}
4.向上空心箭头:
css只需将旋转角度改为如下:
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);