css伪元素实现三角形箭头和空心箭头

使用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);