Div如何实现太极效果

这篇文章主要介绍了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>

感谢你能够认真阅读完这篇文章，希望小编分享的“Div如何实现太极效果”这篇文章对大家有帮助，同时也希望大家多多支持亿速云，关注亿速云行业资讯频道，更多相关知识等着你来学习!