css画八卦图

佚名 6年前 (2019-05-16) 随笔 1388人围观抢沙发百度已收录

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            body{
                background: #ccc;
            }
            #box{
                width: 0px;
                height: 600px;
                border-left: 300px solid white;
                border-right: 300px solid black;
                border-radius: 600px;
            }
            #box::before{
                content: '';
                display: block;
                width: 100px;
                height: 100px;
                border: 100px solid white;
                background: black;
                border-radius: 100%;
                margin-left: -150px;
            }
            #box::after{
                content: '';
                display: block;
                width: 100px;
                height: 100px;
                border: 100px solid black;
                background: white;
                border-radius: 100%;
                margin-left: -150px;
            }
        </style>
    </head>
    <body>
        <div id="box"></div>
    </body>
</html>