1.制作圆形：
要使用CSS来制作一个圆形，我们需要一个div，被给它设置一个ID
<div id="ang"></div>
圆形在设置CSS时要设置宽度和高度相等，然后设置border-radius属性为宽度或高度的一半即可：
#ang{width: 120px;height: 120px;background: #f6f7f8;-moz-border-radius: 60px;-webkit-border-radius: 60px;border-radius: 60px;}
2.制作椭圆形：
椭圆形是正圆形的一个变体，同样使用一个带ID的div来制作
<div id="ang"></div>
设置椭圆形的CSS时，高度要设置为宽度的一半，border-radius属性也要做相应的改变：
#ang {width: 200px;height: 100px;background: #000;-webkit-border-radius: 100px / 50px;-moz-border-radius: 100px / 50px;border-radius: 100px / 50px;}
3.制作左三角形：
左三角形操作的是border-top、border-left和border-right三条边的属性，其中上边和下边要设置透明属性。
#ang{width: 0;height: 0;border-top: 70px solid transparent;border-right: 140px solid #6bbf20;border-bottom: 70px solid transparent;}
4.制作倒三角形：
与正三角形不同的是，倒三角形要设置的是border-top、border-left和border-right三条边的属性：
#ang {width: 0;height: 0;border-top: 140px solid red;border-left: 70px solid transparent;border-right: 70px solid transparent;}
5.制作菱形
制作菱形的方法有很多种。这里使用的是transform属性和rotate相结合，使两个正反三角形上下显示。
#ang{width: 120px;height: 120px;background: #1eff00;/* Rotate */-webkit-transform: rotate(-45deg);-moz-transform: rotate(-45deg);-ms-transform: rotate(-45deg);-o-transform: rotate(-45deg);transform: rotate(-45deg);/* Rotate Origin */-webkit-transform-origin: 0 100%;-moz-transform-origin: 0 100%;-ms-transform-origin: 0 100%;-o-transform-origin: 0 100%;transform-origin: 0 100%;margin: 60px 0 10px 310px;}
转存失败重新上传取消
6.制作梯形：
梯形是三角形的一个变体，设置CSS梯形时，左右两条边设置为相等，并且给它设置一个宽度。
#ang{height: 0;width: 120px;border-bottom: 120px solid #ec3504;border-left: 60px solid transparent;border-right: 60px solid transparent;}
转存失败重新上传取消
7.制作三角形：
要创建一个CSS三角形，需要使用border，通过设置不同边的透明效果，我们可以制作出三角形的现状。另外，在制作三角形时，宽度和高度要设置为0。
<div id="ang"></div>
#ang {width: 0;height: 0;border-bottom: 140px solid #999;border-left: 70px solid transparent;border-right: 70px solid transparent;}
转存失败重新上传取消
8.制作平行四边形：
平行四边形的制作方式是使用transform属性使长方形倾斜一个角度。
#ang{width: 160px;height: 100px;background: #fff;-webkit-transform: skew(30deg);-moz-transform: skew(30deg);-o-transform: skew(30deg);transform: skew(30deg);}
转存失败重新上传取消
9.六角星形：
和五角星的制作方法不同，六角星形状的制作方法是操纵border属性来制作两半图形，然后合并它们。
#star_six_points {width: 0;height: 0;display: block;position: absolute;border-left: 50px solid transparent;border-right: 50px solid transparent;border-bottom: 100px solid #de34f7;margin: 10px auto;}#star_six_points:after {content: "";width: 0;height: 0;position: absolute;border-left: 50px solid transparent;border-right: 50px solid transparent;border-top: 100px solid #de34f7;margin: 30px 0 0 -50px;}
转存失败重新上传取消
10.六边形：
六边形的制作方法可以有很多种，可以像五边形一样，先制作一个长方形，然后在它的上面和下面各放置一个三角形。
#hexagon {width: 100px;height: 55px;background: #fc5e5e;position: relative;margin: 10px auto;}#hexagon:before {content: "";width: 0;height: 0;position: absolute;top: -25px;left: 0;border-left: 50px solid transparent;border-right: 50px solid transparent;border-bottom: 25px solid #fc5e5e;}#hexagon:after {content: "";width: 0;height: 0;position: absolute;bottom: -25px;left: 0;border-left: 50px solid transparent;border-right: 50px solid transparent;border-top: 25px solid #fc5e5e;}
转存失败重新上传取消
11.五星形：
星形的HTML结构同样使用一个带ID的空div。星形的实现方式比较复杂，主要是使用transform属性来旋转不同的边。仔细体会下面的代码。
#star {width: 0;height: 0;margin: 50px 0;color: #fc2e5a;position: relative;display: block;border-right: 100px solid transparent;border-bottom: 70px solid #fc2e5a;border-left: 100px solid transparent;-moz-transform: rotate(35deg);-webkit-transform: rotate(35deg);-ms-transform: rotate(35deg);-o-transform: rotate(35deg);}#star:before {height: 0;width: 0;position: absolute;display: block;top: -45px;left: -65px;border-bottom: 80px solid #fc2e5a;border-left: 30px solid transparent;border-right: 30px solid transparent;content: '';-webkit-transform: rotate(-35deg);-moz-transform: rotate(-35deg);-ms-transform: rotate(-35deg);-o-transform: rotate(-35deg);}#star:after {content: '';width: 0;height: 0;position: absolute;display: block;top: 3px;left: -105px;color: #fc2e5a;border-right: 100px solid transparent;border-bottom: 70px solid #fc2e5a;border-left: 100px solid transparent;-webkit-transform: rotate(-70deg);-moz-transform: rotate(-70deg);-ms-transform: rotate(-70deg);-o-transform: rotate(-70deg);}
转存失败重新上传取消
12.蛋形：
蛋形时椭圆形的一个变体，它的高度要比宽度稍大，并且设置正确的border-radius属性即可以制作出一个蛋形。
#egg {width: 136px;height: 190px;background: #ffc000;display: block;-webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px;border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;}
转存失败重新上传取消
13.无穷符号：
无穷符号可以通过border属性和设置伪元素的角度来实现。
#infinity {width: 220px;height: 100px;position: relative;}#infinity:before,#infinity:after {content: "";width: 60px;height: 60px;position: absolute;top: 0;left: 0;border: 20px solid #06c999;-moz-border-radius: 50px 50px 0;border-radius: 50px 50px 0 50px;-webkit-transform: rotate(-45deg);-moz-transform: rotate(-45deg);-ms-transform: rotate(-45deg);-o-transform: rotate(-45deg);transform: rotate(-45deg);}#infinity:after {left: auto;right: 0;-moz-border-radius: 50px 50px 50px 0;border-radius: 50px 50px 50px 0;-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);-ms-transform: rotate(45deg);-o-transform: rotate(45deg);transform: rotate(45deg);}
转存失败重新上传取消
14.消息提示框：
消息提示框可以先制作一个圆角矩形，然后在需要的地方放置一个三角形。
#comment_bubble {width: 140px;height: 100px;background: #088cb7;position: relative;-moz-border-radius: 12px;-webkit-border-radius: 12px;border-radius: 12px;}#comment_bubble:before {content: "";width: 0;height: 0;right: 100%;top: 38px;position: absolute;border-top: 13px solid transparent;border-right: 26px solid #088cb7;border-bottom: 13px solid transparent;}
转存失败重新上传取消
15.方块
#square {width: 100px;height: 100px;background: red;}
16.左上角
#triangle-topleft {width: 0;height: 0;border-top: 100px solid red;border-right: 100px solid transparent;}
17.右上角
#triangle-topright {width: 0;height: 0;border-top: 100px solid red;border-left: 100px solid transparent;}
18.左下角
#triangle-bottomleft {width: 0;height: 0;border-bottom: 100px solid red;border-right: 100px solid transparent;}
19.右下角
#triangle-bottomright {width: 0;height: 0;border-bottom: 100px solid red;border-left: 100px solid transparent;}
20.弯曲的尾巴箭头
#curvedarrow {position: relative;width: 0;height: 0;border-top: 9px solid transparent;border-right: 9px solid red;transform: rotate(10deg);}#curvedarrow:after {content: "";position: absolute;border: 0 solid transparent;border-top: 3px solid red;border-radius: 20px 0 0 0;top: -12px;left: -9px;width: 12px;height: 12px;transform: rotate(45deg);}
21.梯形
#trapezoid {border-bottom: 100px solid red;border-left: 25px solid transparent;border-right: 25px solid transparent;height: 0;width: 100px;}
22.五边形
#pentagon {position: relative;width: 54px;box-sizing: content-box;border-width: 50px 18px 0;border-style: solid;border-color: red transparent;}#pentagon:before {content: "";position: absolute;height: 0;width: 0;top: -85px;left: -18px;border-width: 0 45px 35px;border-style: solid;border-color: transparent transparent red;}
23.八边形
#octagon {width: 100px;height: 100px;background: red;position: relative;}#octagon:before {content: "";width: 100px;height: 0;position: absolute;top: 0;left: 0;border-bottom: 29px solid red;border-left: 29px solid #eee;border-right: 29px solid #eee;}#octagon:after {content: "";width: 100px;height: 0;position: absolute;bottom: 0;left: 0;border-top: 29px solid red;border-left: 29px solid #eee;border-right: 29px solid #eee;}
24.心形
#heart {position: relative;width: 100px;height: 90px;}#heart:before,#heart:after {position: absolute;content: "";left: 50px;top: 0;width: 50px;height: 80px;background: red;border-radius: 50px 50px 0 0;transform: rotate(-45deg);transform-origin: 0 100%;}#heart:after {left: 0;transform: rotate(45deg);transform-origin: 100% 100%;}
25.半扇形角形
#diamond-shield {width: 0;height: 0;border: 50px solid transparent;border-bottom: 20px solid red;position: relative;top: -50px;}#diamond-shield:after {content: '';position: absolute;left: -50px;top: 20px;width: 0;height: 0;border: 50px solid transparent;border-top: 70px solid red;}
26.正菱形
#diamond {width: 0;height: 0;border: 50px solid transparent;border-bottom-color: red;position: relative;top: -50px;}#diamond:after {content: '';position: absolute;left: -50px;top: 50px;width: 0;height: 0;border: 50px solid transparent;border-top-color: red;}
27.砖石
#cut-diamond {border-style: solid;border-color: transparent transparent red transparent;border-width: 0 25px 25px 25px;height: 0;width: 50px;box-sizing: content-box;position: relative;margin: 20px 0 50px 0;}#cut-diamond:after {content: "";position: absolute;top: 25px;left: -25px;width: 0;height: 0;border-style: solid;border-color: red transparent transparent transparent;border-width: 70px 50px 0 50px;}
28.咬一口
#pacman {width: 0px;height: 0px;border-right: 60px solid transparent;border-top: 60px solid red;border-left: 60px solid red;border-bottom: 60px solid red;border-top-left-radius: 60px;border-top-right-radius: 60px;border-bottom-left-radius: 60px;border-bottom-right-radius: 60px;}
29.十二边角形
#burst-12 {background: red;width: 80px;height: 80px;position: relative;text-align: center;}#burst-12:before,#burst-12:after {content: "";position: absolute;top: 0;left: 0;height: 80px;width: 80px;background: red;}#burst-12:before {transform: rotate(30deg);}#burst-12:after {transform: rotate(60deg);}
30.八边角形
#burst-8 {background: red;width: 80px;height: 80px;position: relative;text-align: center;transform: rotate(20deg);}#burst-8:before {content: "";position: absolute;top: 0;left: 0;height: 80px;width: 80px;background: red;transform: rotate(135deg);}
31.阴阳交合--太极
#yin-yang {width: 96px;box-sizing: content-box;height: 48px;background: #eee;border-color: red;border-style: solid;border-width: 2px 2px 50px 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;box-sizing: content-box;}#yin-yang:after {content: "";position: absolute;top: 50%;left: 50%;background: red;border: 18px solid #eee;border-radius: 100%;width: 12px;height: 12px;box-sizing: content-box;}
32.勋章丝绸
#badge-ribbon {position: relative;background: red;height: 100px;width: 100px;border-radius: 50px;}#badge-ribbon:before,#badge-ribbon:after {content: '';position: absolute;border-bottom: 70px solid red;border-left: 40px solid transparent;border-right: 40px solid transparent;top: 70px;left: -10px;transform: rotate(-140deg);}#badge-ribbon:after {left: auto;right: -10px;transform: rotate(140deg);}
33.丑八怪
#space-invader {box-shadow: 0 0 0 1em red,0 1em 0 1em red,-2.5em 1.5em 0 .5em red,2.5em 1.5em 0 .5em red,-3em -3em 0 0 red,3em -3em 0 0 red,-2em -2em 0 0 red,2em -2em 0 0 red,-3em -1em 0 0 red,-2em -1em 0 0 red,2em -1em 0 0 red,3em -1em 0 0 red,-4em 0 0 0 red,-3em 0 0 0 red,3em 0 0 0 red,4em 0 0 0 red,-5em 1em 0 0 red,-4em 1em 0 0 red,4em 1em 0 0 red,5em 1em 0 0 red,-5em 2em 0 0 red,5em 2em 0 0 red,-5em 3em 0 0 red,-3em 3em 0 0 red,3em 3em 0 0 red,5em 3em 0 0 red,-2em 4em 0 0 red,-1em 4em 0 0 red,1em 4em 0 0 red,2em 4em 0 0 red;background: red;width: 1em;height: 1em;overflow: hidden;margin: 50px 0 70px 65px;}
34.电视屏幕
#tv {position: relative;width: 200px;height: 150px;margin: 20px 0;background: red;border-radius: 50% / 10%;color: white;text-align: center;text-indent: .1em;}#tv:before {content: '';position: absolute;top: 10%;bottom: 10%;right: -5%;left: -5%;background: inherit;border-radius: 5% / 50%;}
35.雪弗龙
#chevron {position: relative;text-align: center;padding: 12px;margin-bottom: 6px;height: 60px;width: 200px;}#chevron:before {content: '';position: absolute;top: 0;left: 0;height: 100%;width: 51%;background: red;transform: skew(0deg, 6deg);}#chevron:after {content: '';position: absolute;top: 0;right: 0;height: 100%;width: 50%;background: red;transform: skew(0deg, -6deg);}
36.放大镜
#magnifying-glass {font-size: 10em;display: inline-block;width: 0.4em;box-sizing: content-box;height: 0.4em;border: 0.1em solid red;position: relative;border-radius: 0.35em;}#magnifying-glass:before {content: "";display: inline-block;position: absolute;right: -0.25em;bottom: -0.1em;border-width: 0;background: red;width: 0.35em;height: 0.08em;transform: rotate(45deg);}
37.faceBo图标
#facebook-icon {background: red;text-indent: -999em;width: 100px;height: 110px;box-sizing: content-box;border-radius: 5px;position: relative;overflow: hidden;border: 15px solid red;border-bottom: 0;}#facebook-icon:before {content: "/20";position: absolute;background: red;width: 40px;height: 90px;bottom: -30px;right: -37px;border: 20px solid #eee;border-radius: 25px;box-sizing: content-box;}#facebook-icon:after {content: "/20";position: absolute;width: 55px;top: 50px;height: 20px;background: #eee;right: 5px;box-sizing: content-box;}
38.月亮
#moon {width: 80px;height: 80px;border-radius: 50%;box-shadow: 15px 15px 0 0 red;}
39.佐伊鲁尼旗帜
#flag {width: 110px;height: 56px;box-sizing: content-box;padding-top: 15px;position: relative;background: red;color: white;font-size: 11px;letter-spacing: 0.2em;text-align: center;text-transform: uppercase;}#flag:after {content: "";position: absolute;left: 0;bottom: 0;width: 0;height: 0;border-bottom: 13px solid #eee;border-left: 55px solid transparent;border-right: 55px solid transparent;}
40.奥米德苏拉利椎体
#cone {width: 0;height: 0;border-left: 70px solid transparent;border-right: 70px solid transparent;border-top: 100px solid red;border-radius: 50%;}
41.红十字
#cross {background: red;height: 100px;position: relative;width: 20px;}#cross:after {background: red;content: "";height: 20px;left: -40px;position: absolute;top: 40px;width: 100px;}
42.小红房
#base {background: red;display: inline-block;height: 55px;margin-left: 20px;margin-top: 55px;position: relative;width: 100px;}#base:before {border-bottom: 35px solid red;border-left: 50px solid transparent;border-right: 50px solid transparent;content: "";height: 0;left: 0;position: absolute;top: -35px;width: 0;}
43.指标
#pointer {width: 200px;height: 40px;position: relative;background: red;}#pointer:after {content: "";position: absolute;left: 0;bottom: 0;width: 0;height: 0;border-left: 20px solid white;border-top: 20px solid transparent;border-bottom: 20px solid transparent;}#pointer:before {content: "";position: absolute;right: -20px;bottom: 0;width: 0;height: 0;border-left: 20px solid red;border-top: 20px solid transparent;border-bottom: 20px solid transparent;}
44.锁
#lock {font-size: 8px;position: relative;width: 18em;height: 13em;border-radius: 2em;top: 10em;box-sizing: border-box;border: 3.5em solid red;border-right-width: 7.5em;border-left-width: 7.5em;margin: 0 0 6rem 0;}#lock:before {content: "";box-sizing: border-box;position: absolute;border: 2.5em solid red;width: 14em;height: 12em;left: 50%;margin-left: -7em;top: -12em;border-top-left-radius: 7em;border-top-right-radius: 7em;}#lock:after {content: "";box-sizing: border-box;position: absolute;border: 1em solid red;width: 5em;height: 8em;border-radius: 2.5em;left: 50%;top: -1em;margin-left: -2.5em;}
