css3实现方框里打钩样式

最新推荐文章于 2022-04-23 15:36:50 发布

LUxxxX

最新推荐文章于 2022-04-23 15:36:50 发布

阅读量7.2k

点赞数 2

分类专栏： CSS学习

本文链接：https://blog.csdn.net/luxxxx/article/details/88415951

版权

CSS学习专栏收录该内容

2 篇文章 0 订阅

订阅专栏

实现图如下：
方框打钩

<html>
<head>
    <title></title>
    <style type="text/css">
        .mytick {
            display: inline-block;
            position: relative;
            width: 15px;
            height: 15px;
            border: 1px solid black;
        }

        .mytick:before,
        .mytick:after {
            content: '';
            pointer-events: none;
            position: absolute;
            color: black;
            border: 1px solid #000;
            background-color: white;
        }


        .mytick:before {
            width: 1px;
            height: 0px;
            left: 20%;
            top: 50%;
            transform: skew(0deg, 50deg);
        }


        .mytick:after {
            width: 4px;
            height: 0px;
            left: 40%;
            top: 40%;
            transform: skew(0deg, -50deg);
        }
    </style>
</head>
<body>
    <span class="mytick"></span>
</body>
</html>

LUxxxX

关注

2
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
css3实现方框里打钩样式

实现图如下：&lt;html&gt;&lt;head&gt; &lt;title&gt;&lt;/title&gt; &lt;style type="text/css"&gt; .mytick { display: inline-block; position: relative; wid...
复制链接

扫一扫

专栏目录