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://my.oschina.net/FansUnion/blog/520386

總結

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

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