欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术!
您的位置:DIVCSS5首页 > HTML >

HTML基础必学列表

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>

如需转载,请注明文章出处和来源网址:http://www.divcss5.com/html/h19169.shtml

我要分享到:

必备CSS教程 Essential CSS Tutorials

必备HTML基础教程 Essential HTML Tutorials

 

如对文章有任何疑问请提交到DIV CSS论坛,或有任何网页制作CSS问题立即到CSS论坛发贴求解 或 直接DIVCSS5网页顶部搜索遇到DIVCSS疑问。
CSS教程文章修订日期:2017-03-11 09:37 原创:DIVCSS5
本文www.divcss5.com DIVCSS5版权所有。