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文件 /detail/huoyingfans/7455161或者 去 /articles/3736 查看
很多其它文章请參考：/user/FansUnion
版权声明：本文博主原创文章，博客，未经同意。
