遮罩效果写出小箭头（小角标）

1先在Html中写em标签，中间写b和i，然后在css中写样式
2在em大容器中设置宽高背景颜色绝对定位垂直居中（top50%，margin-top-一半高度，子绝父相，在em的父亲中写相对定位
3然后在b和i中写宽高背景颜色绝对定位，旋转角度45deg，transform:rotate(45deg),经过旋转之后就有了小角标的样子了，上面的方块遮罩下面的方块（两个方块不同颜色），然后删掉em的背景颜色，b颜色设置为白色，i设置为父亲的背景颜色，这时候就有了一个白色的小角标，之后分别用top和left进行微调距离
4最后为li设置悬停，角标会向上旋转180deg，顺便给他设置过渡属性，使之顺滑，transition all .2s linear 0s;

  html中的部分代码
  <em class="arrow">
          <b></b>
          <i></i>
  </em>
css中部分代码
.site-head .topbar .shortcut-links > ul > li.have-menu{
    position: relative;
    padding-right: 12px;

}
.site-head .topbar .shortcut-links > ul > li.have-menu .arrow{
    position: absolute;
    right: 0;
    top: 50%;
    margin-top: -6px;
    width: 12px;
    height: 12px;
   
}
.site-head .topbar .shortcut-links > ul > li.have-menu:hover .arrow{
    transform: rotate(180deg);
    transition: all .2s linear 0s;
}


.site-head .topbar .shortcut-links > ul > li.have-menu .arrow b{
    position: absolute;
    /* left: 2px;
    top: 0px; */
    left: 3px;
    top: 2px;
    width: 6px;
    height: 6px;
    background-color: #fff;
    transform: rotate(45deg);
}
.site-head .topbar .shortcut-links > ul > li.have-menu .arrow i{
    position: absolute;
    /* left: 2px;
    top: -2px; */
    left: 3px;
    top: 1px;
    width: 6px;
    height: 6px;
    background-color: #2a2a2a;
    transform: rotate(45deg);
}