使用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;}

直角三角形

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

  #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