纯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)
头像
Python数据分析与机器学习实战
  • ¥ 398.0元
  • 市场价:498.0元
数据库基础篇:SQLServer+MySQL+HeidiSQL
  • ¥ 189.0元
  • 市场价:269.0元
React.js视频教程:全新React.js16.12技术合集
  • ¥ 69.0元
  • 市场价:69.0元
服务器管理面板/主机控制面板“安装”服务
服务器管理面板/主机控制面板“安装”服务
  • ¥ 49.9元
  • 市场价:99.9元

发表评论

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