CSS還是比較強大的，能夠實現中國古典的“陰陽八卦圖”等形狀。

正方形

#rectangle {width: 200px;height: 100px;backgrount-color: red;} #circle {width: 100px;height: 100px;-webkit-border-radius: 100px;-moz-border-radius: 100px;border-radius: 100px;background-color: red;}

橢圓

#triangle-up {width: 0;height: 0;border-left: 50px solid transparent;border-right: 50px solid transparent;border-bottom: 100px solid red;}

直角三角形

直角邊left-top

#triangle-leftbottom {width: 0;height: 0;border-left: 100px solid red;border-top: 100px solid transparent;}

直角邊right-top

#triangle-righttop {width: 0;height: 0;border-right: 100px solid red;border-top: 100px solid transparent;}

梯形

#parallelogram {width: 150px;height: 100px;-webkit-transform: skew(20deg);-moz-transform: skew(20deg);transform: skew(20deg);background: red;}

---

雞蛋

#yin-yang {width: 96px;height: 48px;background: #eee;border-color: red;border-style: solid;border-width: 2px 2px 55px 2px;border-radius: 100%;position: relative;}#yin-yang:before {content: "";position: absolute;top: 50%;left: 0;background: #eee;border: 18px solid red;border-radius: 100%;width: 12px;height: 12px;}#yin-yang:after {content: "";position: absolute;top: 50%;left: 50%;background: red;border: 18px solid #eee;border-radius:100%;width: 12px;height: 12px;} 八卦圖展示不出來，蛋疼，請下載HTML文件 http://download.csdn.net/detail/huoyingfans/7455161或者 去 http://blog.fansunion.cn/articles/3736 查看 很多其它文章請參考：http://www.itfriend.cn/user/FansUnion

版權聲明：本文博主原創文章，博客，未經同意不得轉載。

轉載于:https://www.cnblogs.com/hrhguanli/p/4842502.html

總結

以上是生活随笔為你收集整理的使用CSS达到阴阳八卦图等图形的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。