css3实现方框里打钩样式

实现图如下:
css3实现方框里打钩样式_第1张图片

<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>

你可能感兴趣的:(CSS学习)