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 {
 
        }