遮罩效果写出小箭头(小角标)

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中的部分代码
  
          
          
  
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);
}

你可能感兴趣的:(笔记,css3,css,html)