1. 矩形
1 #square{
2 100px;
3 height: 100px;
4 background: red;
5 }
2.圆形
1 #circle {
2 100px;
3 height: 100px;
4 background: red;
<!--基于不同浏览器设置-->
5 -moz-border-radius: 50px;
6 -webkit-border-radius: 50px;
7 border-radius: 50px;
8 }
3.椭圆
1 #oval {
2 200px;
3 height: 100px;
4 background: red;
5 -moz-border-radius: 100px / 50px;
6 -webkit-border-radius: 100px / 50px;
7 border-radius: 100px / 50px;
8 }
4.各种三角形
1 1.左三角
2 #triangle-left {
3 0;
4 height: 0;
5 border-top: 50px solid transparent;
6 border-right: 100px solid red;
7 border-bottom: 50px solid transparent;
8 }
9
10
11
12 2.右三角
13 #triangle-left {
14 0;
15 height: 0;
16 border-top: 50px solid transparent;
17 border-right: 100px solid red;
18 border-bottom: 50px solid transparent;
19 }
20
21
22
23 3.左上三角
24 #triangle-topleft {
25 0;
26 height: 0;
27 border-top: 100px solid red;
28 border-right: 100px solid transparent;
29 }
30
31
32
33 4.右上三角
34 #triangle-topright {
35 0;
36 height: 0;
37 border-top: 100px solid red;
38 border-left: 100px solid transparent;
39 }
40
41
42
43 5.左下三角
44 #triangle-bottomleft {
45 0;
46 height: 0;
47 border-bottom: 100px solid red;
48 border-right: 100px solid transparent;
49 }
50
51
52
53
54 6.右下三角
55 #triangle-bottomright {
56 0;
57 height: 0;
58 border-bottom: 100px solid red;
59 border-left: 100px solid transparent;
60 }
5.平行四边形
1 #parallelogram {
2 150px;
3 height: 100px;
4 margin-left:20px;
5 -webkit-transform: skew(20deg);
6 -moz-transform: skew(20deg);
7 -o-transform: skew(20deg);
8 background: red;
9 }
6.梯形
1 #trapezoid {
2 border-bottom: 100px solid red;
3 border-left: 50px solid transparent;
4 border-right: 50px solid transparent;
5 height: 0;
6 100px;
7 }
7.六角形
1 #star-six {
2 0;
3 height: 0;
4 border-left: 50px solid transparent;
5 border-right: 50px solid transparent;
6 border-bottom: 100px solid red;
7 position: relative;
8 }
9
10
11 #star-six:after {
12 0;
13 height: 0;
14 border-left: 50px solid transparent;
15 border-right: 50px solid transparent;
16 border-top: 100px solid red;
17 position: absolute;
18 content: "";
19 top: 30px;
20 left: -50px;
21 }
8.五角星
1 #star-five {
2 margin: 50px 0;
3 position: relative;
4 display: block;
5 color: red;
6 0px;
7 height: 0px;
8 border-right: 100px solid transparent;
9 border-bottom: 70px solid red;
10 border-left: 100px solid transparent;
11 -moz-transform: rotate(35deg);
12 -webkit-transform: rotate(35deg);
13 -ms-transform: rotate(35deg);
14 -o-transform: rotate(35deg);
15 }
16 #star-five:before {
17 border-bottom: 80px solid red;
18 border-left: 30px solid transparent;
19 border-right: 30px solid transparent;
20 position: absolute;
21 height: 0;
22 0;
23 top: -45px;
24 left: -65px;
25 display: block;
26 content: '';
27 -webkit-transform: rotate(-35deg);
28 -moz-transform: rotate(-35deg);
29 -ms-transform: rotate(-35deg);
30 -o-transform: rotate(-35deg);
31
32 }
33 #star-five:after {
34 position: absolute;
35 display: block;
36 color: red;
37 top: 3px;
38 left: -105px;
39 0px;
40 height: 0px;
41 border-right: 100px solid transparent;
42 border-bottom: 70px solid red;
43 border-left: 100px solid transparent;
44 -webkit-transform: rotate(-70deg);
45 -moz-transform: rotate(-70deg);
46 -ms-transform: rotate(-70deg);
47 -o-transform: rotate(-70deg);
48 content: '';
49 }
9.五角大楼
1 #pentagon {
2 position: relative;
3 54px;
4 border- 50px 18px 0;
5 border-style: solid;
6 border-color: red transparent;
7 }
8 #pentagon:before {
9 content: "";
10 position: absolute;
11 height: 0;
12 0;
13 top: -85px;
14 left: -18px;
15 border- 0 45px 35px;
16 border-style: solid;
17 border-color: transparent transparent red;
18 }
10.爱心
1 #heart {
2 position: relative;
3 100px;
4 height: 90px;
5 }
6 #heart:before,
7 #heart:after {
8 position: absolute;
9 content: "";
10 left: 50px;
11 top: 0;
12 50px;
13 height: 80px;
14 background: red;
15 -moz-border-radius: 50px 50px 0 0;
16 border-radius: 50px 50px 0 0;
17 -webkit-transform: rotate(-45deg);
18 -moz-transform: rotate(-45deg);
19 -ms-transform: rotate(-45deg);
20 -o-transform: rotate(-45deg);
21 transform: rotate(-45deg);
22 -webkit-transform-origin: 0 100%;
23 -moz-transform-origin: 0 100%;
24 -ms-transform-origin: 0 100%;
25 -o-transform-origin: 0 100%;
26 transform-origin: 0 100%;
27 }
28 #heart:after {
29 left: 0;
30 -webkit-transform: rotate(45deg);
31 -moz-transform: rotate(45deg);
32 -ms-transform: rotate(45deg);
33 -o-transform: rotate(45deg);
34 transform: rotate(45deg);
35 -webkit-transform-origin: 100% 100%;
36 -moz-transform-origin: 100% 100%;
37 -ms-transform-origin: 100% 100%;
38 -o-transform-origin: 100% 100%;
39 transform-origin :100% 100%;
40 }
11.无穷大符号
1 #infinity {
2 position: relative;
3 212px;
4 height: 100px;
5 }
6
7 #infinity:before,
8 #infinity:after {
9 content: "";
10 position: absolute;
11 top: 0;
12 left: 0;
13 60px;
14 height: 60px;
15 border: 20px solid red;
16 -moz-border-radius: 50px 50px 0 50px;
17 border-radius: 50px 50px 0 50px;
18 -webkit-transform: rotate(-45deg);
19 -moz-transform: rotate(-45deg);
20 -ms-transform: rotate(-45deg);
21 -o-transform: rotate(-45deg);
22 transform: rotate(-45deg);
23 }
24
25 #infinity:after {
26 left: auto;
27 right: 0;
28 -moz-border-radius: 50px 50px 50px 0;
29 border-radius: 50px 50px 50px 0;
30 -webkit-transform: rotate(45deg);
31 -moz-transform: rotate(45deg);
32 -ms-transform: rotate(45deg);
33 -o-transform: rotate(45deg);
34 transform: rotate(45deg);
35 }
12.鸡蛋
1 #egg {
2 display:block;
3 126px;
4 height: 180px;
5 background-color: red;
6 -webkit-border-radius:63px 63px 63px 63px/108px 108px 72px 72px;
7 border-radius:50% 50% 50% 50% /60% 60% 40% 40%;
8 }
13.食逗人
1 #pacman {
2 0px;
3 height: 0px;
4 border-right: 60px solid transparent;
5 border-top: 60px solid red;
6 border-left: 60px solid red;
7 border-bottom: 60px solid red;
8 border-top-left-radius: 60px;
9 border-top-right-radius: 60px;
10 border-bottom-left-radius: 60px;
11 border-bottom-right-radius: 60px;
12 }
14.阴阳八卦
1 #yin-yang {
2 96px;
3 height: 48px;
4 background: #eee;
5 border-color: red;
6 border-style: solid;
7 border- 2px 2px 50px 2px;
8 border-radius: 100%;
9 position: relative;
10 }
11
12
13
14 #yin-yang:before {
15 content: "";
16 position: absolute;
17 top: 50%;
18 left: 0;
19 background: #eee;
20 border: 18px solid red;
21 border-radius: 100%;
22 12px;
23 height: 12px;
24 }
25
26 #yin-yang:after {
27 content: "";
28 position: absolute;
29 top: 50%;
30 left: 50%;
31 background: red;
32 border: 18px solid #eee;
33 border-radius:100%;
34 12px;
35 height: 12px;
36 }
#本文来源网络