原创

利用CSS3的 transform属性画对号

直接上代码复制粘贴就能用

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>css对号</title>
<style>     
    .rig {
        width:40px;
        height:40px;
        border-radius:50% ;
        background:#009a61;
        display:block;
        position: relative; 
    }
    .rig-b {
        height:24px;
        width:3px;
        border-radius: 10px;
        display:block;
        background:white;
        position: absolute;
        top:8px;
        left:23px;
        transform:rotate(45deg);    
        -ms-transform:rotate(45deg);    
    }
    .rig-a {
        width:3px;
        height:12px;
        border-radius: 10px;
        display:block;
        background:white;
        transform: rotate(-45deg);
        -ms-transform:rotate(-45deg);
        position: absolute;
        top:18px;
        left:11px;       
    }

    .num{
        width:40px;
        height:40px;
        border-radius:50% ;
        background:#009a61;
        display:block;
        position: relative;
        font-size: 20px;
        line-height: 40px;
        color:white;
    }
    .num-1:after{
         content:"1";
         text-align:center;
         display:block;
    }
    .num-2:after{
         content:"2";
         text-align:center;
         display:block;
    }
</style>
</head>
    <span class="rig">
        <span class="rig-a"></span>
        <span class="rig-b"></span>
    </span> 

    <span class="num num-1">
    </span>

    <span class="num num-2">
    </span>
</body>
</html>

效果图

正文到此结束
本文目录