CSS3的30个效果例子：实现圆角，三角，五角星，五边形，爱心，12角星，8角星，圆，椭圆，圆圈，八卦

分类：Html_Css| 发布：kuabaobao| 查看：566 | 发表时间：2015/3/14

新出的html5新增了不少标签，性能更强，原来的很繁琐的功能几个标签就能实现，同时CSS3也推出，更是一大亮点，下面是css3的部分用法，在此总结一下，以供需要的朋友们，总共30个例子

1.长方形

1#Rectangle{
2width: 200px;
3height: 50px;
4background-color: red;
5color: white;
6text-align: center;
7}

长方形

2.正方形

1#square{
2width: 200px;
3height: 200px;
4background-color: red;
5color: white;
6text-align: center;
7}

正方形

3.实心圆

01#perfect-circle{
02width: 200px;
03height: 200px;
04background-color: red;
05color: white;
06text-align: center;
07border-radius: 100px;
08/*-webkit-border-radius: 100px;*/
09-moz-border-radius: 100px;
10}

实心圆

4.圈

01#circle{
02width: 200px;
03height: 200px;
04background-color: white;
05color: black;
06text-align: center;
07border-radius: 100px;
08/*-webkit-border-radius: 10px;*/
09/*-moz-border-radius: 100px;*/
10border:3px red solid;
11}

5.椭圆

01#ellipse{
02width: 200px;
03height: 100px;
04background-color: red;
05color: white;
06text-align: center;
07border-radius: 100px/50px;
08/*-webkit-border-radius: 100px/50px;*/
09/*-moz-border-radius: 100px/50px;*/
10}

6.上三角

01#triangle-up{
02width: 0px;
03height: 0px;
04color: white;
05text-align: center;
06border-left: 50px solid transparent;
07    border-right: 50px solid transparent;
08    border-bottom: 100px solid red;
09/*-webkit-border-top-left-radius: 50px solid transparent;*/
10/*-webkit-border-top-right-radius: 50px solid transparent;*/
11/*-webkit-border-bottom-left-radius: 100px solid red;*/
12/*-webkit-border-bottom-right-radius: 100px solid red;*/
13}

上三角

7.下三角

1#triangle-down{
2width: 0px;
3height: 0px;
4color: white;
5text-align: center;
6border-top: 100px solid red;
7border-left: 50px solid transparent;
8border-right: 50px solid transparent;
9}

下三角

8.左三角

1#triangle-left{
2width: 0px;
3height: 0px;
4color: white;
5text-align: center;
6border-top: 50px solid transparent;
7border-left: 100px solid red;
8border-bottom: 50px solid transparent;
9}

左三角

9.右三角

1#triangle-right{
2width: 0px;
3height: 0px;
4color: white;
5text-align: center;
6border-top: 50px solid transparent;
7border-right: 100px solid red;
8border-bottom: 50px solid transparent;
9}

右三角

10.顶左

1#triangle-topleft{
2width: 0px;
3height: 0px;
4border-top: 100px solid red;
5border-right: 100px solid transparent;
6}

11.顶右

1#triangle-topright{
2width: 0px;
3height: 0px;
4border-top: 100 solid red;
5border-left: 100 solid transparent;
6}

12.底左

1#triangle-bottomleft{
2width: 0px;
3height: 0px;
4border-bottom: 100px solid red;
5border-right: 100px solid transparent;
6}<img alt="底左" src="http://camnpr.com/UPLOAD/2015/2/tx/12.png">

13.底右

1#triangle-bottomright{
2width: 0px;
3height: 0px;
4border-bottom: 100px solid red;
5border-left: 100px solid transparent;
6}

14.平行四边形

1#parallelogram{
2width: 200px;
3height: 150px;
4margin-left: 30px;
5-webkit-transform: skew(-30deg);
6-moz-transform: skew(200deg);
7-o-transform: skew(200deg);
8background-color: red;
9}

平行四边形

15.

1#trapezoid{
2border-bottom: 100px solid red; 
3border-left: 50px solid transparent; 
4border-right: 50px solid transparent; 
5width: 100px;
6height: 0px;
7 
8}

css3画图形效果

16.

01#star-five{
02width: 0;
03height: 0;
04color: red;
05margin: 50px 0;
06position: relative;
07display: block;
08border-left: 100px solid transparent;
09border-right: 100px solid transparent;
10border-bottom: 70px solid red;
11-moz-transfrom:rotate(35deg);
12-webkit-transform:rotate(35deg);
13-ms-transform:rotate(35deg);
14-o-transform:rotate(35deg);
15}
16#star-five:before{
17width: 0;
18height: 0;
19border-left: 30px solid transparent;
20border-right: 30px solid transparent;
21border-bottom: 80px solid red;
22position: absolute;
23top: -45px;
24left: -65px;
25color: white;
26display: block;
27content: "";
28-moz-transform:rotate(-35deg);
29-webkit-transform:rotate(-35deg);
30-ms-transform:rotate(-35deg);
31-o-transform:rotate(-35deg); 
32}
33#star-five:after{
34width: 0;
35height: 0;
36display: block;
37position: absolute;
38color: red;
39top: 3px;
40left: -105px;
41border-left: 100px solid transparent;
42border-right: 100px solid transparent;
43border-bottom: 70px solid red;
44content: "";
45-moz-transform:rotate(-70deg);
46-webkit-transform:rotate(-70deg);
47-ms-transform:rotate(-70deg);
48-o-transform:rotate(-70deg);
49}

css3画图形效果

17.

01#star-six{
02width: 0;
03height: 0;
04border-left: 50px solid transparent;
05border-right: 50px solid transparent;
06border-bottom: 100px solid red;
07position: relative;
08}
09#star-six:after{
10width: 0;
11height: 0;
12border-top: 100px solid red;
13border-left: 50px solid transparent;
14border-right: 50px solid transparent;
15position: absolute;
16content: "";
17top: 30px;
18left: -50px;
19}

css3画图形效果

18.

01#pentagon{
02width: 54px;
03position: relative;
04border-width: 50px 18px 0;
05border-style: solid;
06border-color: red transparent;
07}
08#pentagon:before{
09content: "";
10position: absolute;
11width: 0;
12height: 0;
13top: -85px;
14left: -18px;
15border-width: 0 45px 35px;
16border-style: solid;
17border-color: transparent transparent red;
18}

css3画图形效果

19.

01#hexagon{
02width: 100px;
03height: 55px;
04background-color: red;
05position: relative;
06}
07#hexagon:before{
08content: "";
09position: absolute;
10top: -25px;
11left: 0;
12width: 0;
13height: ;
14border-left: 50px solid transparent;
15border-right: 50px solid transparent;
16border-bottom: 25px solid red;
17}
18#hexagon:after{
19content: "";
20left: 0;
21width: 0;
22height: 0;
23bottom: -25px;
24position: absolute;
25border-left: 50px solid transparent;
26border-right: 50px solid transparent;
27border-top: 25px solid red;
28}

css3画图形效果

20.

01#octagon{
02width: 100px;
03height: 100px;
04background-color: red;
05position: relative;
06}
07#octagon:before{
08width: 42px;
09height: 0;
10top: 0;
11left: 0;
12position: absolute;
13content: "";
14border-left: 29px solid #eee;
15border-right: 29px solid #eee;
16border-bottom: 29px solid red;
17}
18#octagon:after{
19width: 42px;
20height: 0;
21left: 0;
22bottom: 0;
23position: absolute;
24content: "";
25border-left: 29px solid #eee;
26border-right: 29px solid #eee;
27border-top: 29px solid red;
28}

css3画图形效果

01#heart{
02width: 100px;
03height: 90px;
04position: relative;
05}
06#heart:before,#heart:after{
07width: 50px;
08height: 80px;
09left: 50px;
10top: 0;
11background-color: red;
12position: absolute;
13content: "";
14-moz-border-radius:50px 50px 0 0;
15border-radius: 50px 50px 0 0;
16-webkit-transform:rotate(-45deg);
17-ms-transform:rotate(-45deg);
18-moz-transform:rotate(-45deg);
19-o-transform:rotate(-45deg);
20transform:rotate(-45deg);
21-webkit-transform-origin:0 100%;
22-ms-transform-origin:0 100%;
23-moz-transform-origin:0 100%;
24-o-transform-origin:0 100%;
25tansform-origin:0 100%;
26}
27#heart:after{
28left: 0;
29-webkit-transform:rotate(45deg);
30-ms-transform:rotate(45deg);
31-moz-transform:rotate(45deg);
32-o-transform:rotate(45deg);
33transform:rotate(45deg);
34-webkit-transform-origin:100% 100%;
35-ms-transform-origin:100% 100%;
36-moz-transform-origin:100% 100%;
37-o-transform-origin:100% 100%;
38transform-origin:100% 100%;
39}

css3画图形效果

22.

01#infinity{
02width: 212px;
03height: 100px;
04position: relative;
05}
06#infinity:before,#infinity:after{
07width: 60px;
08height: 60px;
09top: 0;
10left: 0;
11border: 20px solid red;
12position: absolute;
13content: "";
14border-radius: 50px 50px 0 50px;
15-webkit-border-radius:50px 50px 0 50px;
16-moz-border-radius:50px 50px 0 50px;
17transform:rotate(-45deg);
18-webkit-transform:rotate(-45deg);
19-ms-transform:rotate(-45deg);
20-moz-transform:rotate(-45deg);
21-o-transform:rotate(-45deg);
22}
23#infinity:after{
24left: auto;
25right: 0;
26border-radius: 50px 50px 50px 0;
27-webkit-border-radius:50px 50px 50px 0;
28-moz-border-radius:50px 50px 50px 0;
29transform:rotate(45deg);
30-webkit-transform:rotate(45deg);
31-moz-transform:rotate(45deg);
32-ms-transform:rotate(45deg);
33-o-transform:rotate(45deg);
34}

css3画图形效果

23.

1#egg{
2width: 126px;
3height: 180px;
4background-color: red;
5display: block;
6border-radius: 50% 50% 50% 50%/60% 60% 40% 40%;
7/*-webkit-border-radius:50% 50% 50% 50%/60% 60% 40% 40%;*/
8}

css3画图形效果

24.

01#pacman{
02width: 0;
03height: 0;
04border-right: 60px solid transparent;
05border-left: 60px solid red;
06border-top: 60px solid red;
07border-bottom: 60px solid red;
08border-top-left-radius: 60px;
09border-top-right-radius: 60px;
10border-bottom-left-radius: 60px;
11border-bottom-right-radius: 60px;
12}

css3画图形效果

25.

01#talkbubble{
02width: 200px;
03height: 100px;
04background-color: red;
05position: relative;
06border-radius: 10px;
07-webkit-border-radius:10px;
08-moz-border-radius:10px;
09-ms-border-radius:10px;
10-o-border-radius:10px;
11}
12#talkbubble:before{
13width: 0;
14height: 0;
15right: 100%;
16top: 30px;
17position: absolute;
18content: "";
19border-top: 15px solid transparent;
20border-right: 30px solid red;
21border-bottom: 15px solid transparent;
22}

css3画图形效果

26.

01#burst-12{
02width: 80px;
03height: 80px;
04background-color: red;
05position: relative;
06text-align: center;
07}
08#burst-12:before,#burst-12:after{
09width: 80px;
10height: 80px;
11top: 0;
12left: 0;
13background-color: red;
14position: absolute;
15content: "";
16}
17#burst-12:before{
18transform:rotate(30deg);
19-webkit-transform:rotate(30deg);
20-ms-transform:rotate(30deg);
21-moz-transform:rotate(30deg);
22-o-transform:rotate(30deg);
23}
24#burst-12:after{
25transform:rotate(60deg);
26-webkit-transform:rotate(60deg);
27-ms-transform:rotate(60deg);
28-moz-transform:rotate(60deg);
29-o-transform:rotate(60deg);
30}

css3画图形效果

27.

01#burst-8{
02width: 80px;
03height: 80px;
04background-color: red;
05text-align: center;
06position: relative;
07transform:rotate(20deg);
08-webkit-transform:rotate(20deg);
09-ms-transform:rotate(20deg);
10-moz-transform:rotate(20deg);
11-o-transform:rotate(20deg);
12}
13#burst-8:before{
14width: 80px;
15height: 80px;
16top: 0;
17left: 0;
18background-color: red;
19position: absolute;
20content: "";
21transform:rotate(135deg);
22-webkit-transform:rotate(135deg);
23-ms-transform:rotate(135deg);
24-moz-transform:rotate(135deg);
25-o-transform:rotate(135deg);
26}

css3画图形效果

29.

01#diamond{
02width: 50px;
03height: 0;
04border-style: solid;
05border-color: transparent transparent red transparent;
06border-width: 0 25px 25px 25px;
07position: relative;
08margin: 20px 0 50px 0;
09}
10#diamond:after{
11width: 0;
12height: 0;
13top: 25px;
14left: -25px;
15border-style: solid;
16border-color: red transparent transparent transparent;
17border-width: 70px 50px 0 50px;
18position: absolute;
19content: "";
20}

css3画图形效果

30.

01#yin-yang{
02width: 96px; 
03height: 48px; 
04background-color: #fff; 
05border-color: red; 
06border-style: solid; 
07border-width: 2px 2px 50px 2px; 
08border-radius: 100%; 
09position: relative; 
10}
11#yin-yang:before {
12width: 12px; 
13height: 12px;
14top: 50%; 
15left: 0; 
16content: ""; 
17position: absolute; 
18background-color: #fff; 
19border: 18px solid red; 
20border-radius: 100%; 
21} 
22#yin-yang:after {
23width: 12px; 
24height: 12px;
25top: 50%; 
26left: 50%;
27background-color: red;
28border: 18px solid #fff; 
29border-radius:100%; 
30content: ""; 
31position: absolute; 
32} 