纯css实现对号(√)和叉号(×) 效果

对号(√) 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 ;
}

 

叉号(×) css样式如下:

.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);
}
    A+
发布日期:2020年02月13日 21:07:49  所属分类:HTML
最后更新时间:2020-02-13 21:12:02
评分: (2 票;平均数5.00 ;最高评分 5 ;用户总数2;总得分 10;百分比100.00)
头像
PHP运行环境 wamp lamp lnmp 安装 配置 搭建
PHP运行环境 wamp lamp lnmp 安装 配置 搭建
  • ¥ 9.9元
  • 市场价:49.9元
wordpress站群服务 泛解析二级域名 二级目录站群
wordpress站群服务 泛解析二级域名 二级目录站群
  • ¥ 1999.9元
  • 市场价:4800元
服务器管理面板/主机控制面板“安装”服务
服务器管理面板/主机控制面板“安装”服务
  • ¥ 9.9元
  • 市场价:49.9元
wp discux 帝国 dedecms phpcms等快速建站
wp discux 帝国 dedecms phpcms等快速建站
  • ¥ 99.9元
  • 市场价:499.9元

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: