【HTML】纯css实现的对号和叉号

对号

   .success{
    display: inline-block;
    font-weight: 700;
    margin: 0 10px;
    width: 8px;
    height: 13px;
    transform: rotate(45deg);
    border-style: solid;
    border-color: #009933;
    border-width:   0 4px 4px 0 ;
}
       

叉号

.error {
    width: 15px;
    height: 15px;
    margin: auto;
    position: relative;
    margin-left: 32px;
}
.error::before,
.error::after {
    content: "";
    position: absolute;
    height: 18px;
    width: 3px;
    top: 0px;
    right: 15px;
    background: red;
}
.error::before {
    transform: rotate(45deg);
}
.error::after {
    transform: rotate(-45deg);
}

猜你喜欢

转载自www.cnblogs.com/richerdyoung/p/12294144.html