用CSS實現陰陽八卦圖等圖形

標籤：css   圖形   八卦圖   雞蛋圖   

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