css伪元素实现箭头和关闭图标及环形实心圆点

关闭按钮效果的实现

.close{
    display: inline-block;
    width: 14px;
    height: 1px;
    background: #ccc;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
}
.close:after {
    content: '';
    display: block;
    width: 14px;
    height: 1px;
    background: #ccc;
    transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
}

箭头的实现

arrow:after {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    border-top: 1px solid #656565;
    border-right: 1px solid #656565;
    transform: rotate(-45deg);
    -webkit-transform: rotate(-130deg);
}

在遇到要实现这样的效果

        .box {
            margin: 100px 0 0 100px;
            width: 20px;
            height: 20px;
            border: 1px solid red;
            border-radius: 50%;
 
            background-image: repeating-radial-gradient(skyblue 0px, skyblue 5px, #fff 5px, #fff 10px);
        }
 
        .box:hover {
 
        }

转载于:https://www.cnblogs.com/muqiao/p/8808189.html