热搜： Python 编程 PHP vue dedecms

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

发布时间：2023-07-02 18:18:14 来源：互联网

.

17、雨 "哗哗…… "地下起来，就像一个庞大的乐队在地上、空中、屋顶上演奏着秋的交响曲！行道树叶——梧桐叶也伴着秋雨在天空中飘荡，像几只飞舞的蝴蝶在天空中嬉戏！终于，它们飘累了，慢慢地落在了湿漉漉的水泥地上。远远的望去，就像是土地上的几朵小花，给寂寞的秋天增添了几分情趣！

闲着没事写了一个利用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代码实现对号与叉号的效果