十年网站开发经验 + 多家企业客户 + 靠谱的建站团队
量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决
这篇文章主要介绍了Div如何实现太极效果,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。
成都创新互联公司主要从事成都网站设计、网站建设、网页设计、企业做网站、公司建网站等业务。立足成都服务德安,十余年网站建设经验,价格优惠、服务专业,欢迎来电咨询建站服务:028-86922220
利用div+css实现简单的太极效果
.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;}
感谢你能够认真阅读完这篇文章,希望小编分享的“Div如何实现太极效果”这篇文章对大家有帮助,同时也希望大家多多支持创新互联,关注创新互联行业资讯频道,更多相关知识等着你来学习!