对号
<div class="success"></div>
.success {
position: relative;
width: 16px;
height: 16px;
background: #093;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
}
.success::before {
position: absolute;
content: '';
width: 5px;
height: 8px;
transform: rotate(45deg);
border-right: 2px solid #fff;
border-bottom: 2px solid #fff;
top: 1px;
}
叉号
<div class="error"></div>
.error {
display: flex;
justify-content: center;
align-items: center;
position: relative;
width: 16px;
height: 16px;
background: #f00;
border-radius: 50%;
}
.error::before, .error::after {
position: absolute;
content: '';
width: 2px;
height: 12px;
background: #fff;
}
.error::before {
transform: rotate(45deg);
}
.error::after {
transform: rotate(-45deg);
}
image.png
网友评论