纯CSS代码实现对号与叉号的效果

2021-11-06 16:47:16

249

闲着没事写了一个利用CSS代码实现对号与叉号的效果，下面放个代码出来，方便以后自己使用！

CSS代码实现对号与叉号的效果代码

html示例代码：

<!DOCTYPE html>
<html>
<head>
    <style>
    /*对号CSS*/
    .success{
        display: inline-block;
        font-weight: 700;
        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;
        position: relative;
        margin-left: 10px;
    }
    .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);
    }
    </style>
</head>
<body>
<div class="success"></div>
<br/><br/>
<div class="error"></div>
</body>
</html>

示例效果：

纯CSS代码实现对号与叉号的效果

上一篇：收集了几个CSS的初始化代码下一篇：使整个网站页面变灰的方法

网站建设

Js

纯CSS代码实现对号与叉号的效果