CSS3状态图标：等待、正确、错误
效果
HTML
CSS
.status{position:relative;box-sizing:border-box;height:20px;width:20px;border-radius:10px;border:1px solid #000}
.status::before,.status::after{content:"";display:block;position:absolute;height:2px;width:8px}
.status.ok{border-color:#4caf50}
.status.ok::before{background-color:#4caf50;top:10px;left:3px;width:6px;transform:rotate(45deg)}
.status.ok::after{background-color:#4caf50;top:9px;right:1px;width:11px;transform:rotate(-45deg)}
.status.err{border-color:#c62828}
.status.err::before,.status.err::after{background-color:#c62828;top:8px;width:12px;}
.status.err::before{left:3px;transform:rotate(45deg)}
.status.err::after{right:3px;transform:rotate(-45deg)}
.status.wait{border-color:#2196f3}
.status.wait::before{background-color:#2196f3;top:3px;left:7.5px;width:2px;height:8px}
.status.wait::after{top:10px;right:3.5px;width:5px;height:1px;background-color:#2196f3}