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 {

}