Div实现太极效果

2019-09-10 郑州网站建设  

利用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>


河南郑州做网站首选天择文化,我们专注郑州网站建设网站设计网站制作与开发,是中原地区专业的郑州网络公司,多年来我们一直努力,服务客户数百家,欢迎您的咨询。
本文链接:郑州网络公司http://tzchb.ieyo.com/seo/1898.html转载请标明出处,谢谢合作!
标签:
  • Ч
  • css
  • 实现
  • 简单
  • DIV
  • +
  • 太极
  • 利用