用css画一个原型里有一个对号或者叉叉的图标

最新推荐文章于 2024-05-06 16:09:47 发布

大橙子Gsc

最新推荐文章于 2024-05-06 16:09:47 发布

阅读量1.2k

点赞数 4

分类专栏：前端布局踩坑前端 VUE 文章标签： css css3 html

本文链接：https://blog.csdn.net/weixin_43925811/article/details/115617028

版权

前端同时被 3 个专栏收录

16 篇文章 1 订阅

订阅专栏

VUE

7 篇文章 0 订阅

订阅专栏

前端布局踩坑

5 篇文章 0 订阅

订阅专栏

用css画一个圆形里有一个对勾或者叉叉的图标

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用css画一个圆形里有一个对勾或者叉叉的图标</title>
    <style>
        .checkmark {
            width: 40px;
            height: 40px;
            border-radius: 40px;
            background: #009933;
            display: inline-block;
            position: relative;
        }

        .checkmark:before,
        .checkmark::after {
            content: "";
            height: 28px;
            width: 6px;
            border-radius: 10px;
            display: block;
            background: white;
            position: absolute;
            top: 6px;
            /*40-6=34*/
            left: 20px;
            /*make the two rects in the middle of the cycle */
            transform: rotate(45deg);
            -ms-transform: rotate(45deg);
        }

        .checkmark::before {
            height: 15px;
            transform: rotate(-45deg);
            -ms-transform: rotate(-45deg);
            position: absolute;
            top: 18px;
            /*40-18=12  */
            left: 8px;
        }

        .fork {
            width: 40px;
            height: 40px;
            border-radius: 40px;
            background: red;
            display: inline-block;
            position: relative;
        }

        .g-right {
            display: inline-block;
            width: 30px;
            height: 4px;
            background: #fff;
            line-height: 0;
            font-size: 0;
            vertical-align: middle;
            -webkit-transform: rotate(45deg);
            position: absolute;
            top: 16px;
            left: 5px;
        }

        .g-right:after {
            content: "/";
            display: block;
            width: 30px;
            height: 4px;
            background: #fff;
            -webkit-transform: rotate(-90deg);
        }
    </style>
</head>

<body>
    <div class="checkmark"></div>//对号
    <div class="fork">//叉叉
        <div class="g-right"></div>
    </div>
</body>

</html>

效果图

大橙子Gsc

关注

4
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
用css画一个原型里有一个对号或者叉叉的图标

用css画一个圆形里有一个对勾或者叉叉的图标<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"&
复制链接

扫一扫

专栏目录