Div实现太极效果

利用div+css实现简单的太极效果

<style>

   .taiji{border-left: 100px solid white;

        border-right: 100px solid black;

        box-shadow: 0 0 5px black;height: 200px;

        width: 0;margin: 0 auto;

        border-radius: 100px;position:relative;}

    .taiji:before{content:  "";

        width: 100px;height: 100px;position: absolute;

        top: 0; left:-50px;background-color: black;border-radius:50px;

        box-shadow: 0 100px 0 white;}

    .taiji:after{content: "";width: 25px;height: 25px;

        position: absolute;top: 40px;left: -20px;

        background-color:white;border-radius: 25px;

        box-shadow: 0 100px 0 black;}

    </style>

<div class="taiji"></div>