css画八卦图 

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

 

posted @ 2019-05-16 15:41  webxy  阅读(537)  评论(0)    收藏  举报