码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2020-02-11 11:20:18      阅读:277      评论:0      收藏:0      [点我收藏+]

标签:inline   orm   block   red   before   nsf   play   class   order   

对号

   .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);
}

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

标签:inline   orm   block   red   before   nsf   play   class   order   

原文地址:https://www.cnblogs.com/richerdyoung/p/12294144.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!