css实现icon的方法

css实现小箭头icon的两种方法

1、使用元素伪类实现

.tooltip:after{
    /* 提示信息 */
    content:'';
    position:absolute;
    border:6px solid #5190ac;
    border-color:#5190ac transparent transparent;//分别为上、左右的边框颜色
    width:0;
    height:0;
    bottom:-12px;
    left:50%;
    margin-left:-6px;
}

2、使用border的transparent（透明属性）实现

.cert{
    display: inline-block;
    width:0;
    height: 0;
    border-top:10px dashed #000;
    border-top:10px solid  #000 \9;
    border-right:10px solid transparent;
    border-left:10px solid transparent;
}

css实现关闭icon

.u-close{
    position:absolute;top:-2rem;right:0;
    width:1.26rem;height:1.26rem;
    border:1px solid #fff;border-radius:50%;
    transform-origin:50% 50%;
    transform:rotate(45deg);
}
.u-close:after,.u-close:before{
    content:'';
    position:absolute;top:50%;left:50%;
    transform:translate3d(-50%,-50%,0);
    width:1px;height:10px;background:#fff;border-radius:50%;
}
.u-close:before{
    transform:translate3d(-50%,-50%,0) rotate(90deg);
    transform-origin:50% 50%;
}
i{
    position:absolute;
    top:-0.5rem;
    right:0.63rem;
    width:1px;
    height:6px;
    background: #fff;
}