纯CSS画的基本图形(矩形、圆形、三角形、多边形、爱心、八卦等),NB么
今天在css-tricks上看到一篇文章,那篇文章让我不禁心头一震,强大的CSS啊,居然能画出这么多基本的图形。图形包括基本的矩形、圆形、椭圆、三角形、多边形,也包括稍微复杂一点的爱心、钻石、阴阳八卦等。当然有一些需要用到CSS3的属性,所以在你打开这篇文章的时候,我希望你用的是firefox或者chrome,当然IE也能看一部分的。那好,下面就一起来看看我们是如何用纯CSS来画这些图形的,如果你也觉得很震撼,推荐给你的朋友吧。
最终效果:
CSS代码如下:
1
2
3
4
5
|
# square { width : 100px ; height : 100px ; background : red ; } |
最终效果:
CSS代码如下:
1
2
3
4
5
|
#rectangle { width : 200px ; height : 100px ; background : red ; } |
最终效果:
CSS代码如下:
1
2
3
4
5
6
7
8
|
# circle { width : 100px ; height : 100px ; background : red ; -moz-border-radius: 50px ; -webkit-border-radius: 50px ; border-radius: 50px ; } |
最终效果:
CSS代码如下:
1
2
3
4
5
6
7
8
|
#oval { width : 200px ; height : 100px ; background : red ; -moz-border-radius: 100px / 50px ; -webkit-border-radius: 100px / 50px ; border-radius: 100px / 50px ; } |
最终效果:
CSS代码如下:
1
2
3
4
5
6
7
|
#triangle-up { width : 0 ; height : 0 ; border-left : 50px solid transparent ; border-right : 50px solid transparent ; border-bottom : 100px solid red ; } |
最终效果:
CSS代码如下:
1
2
3
4
5
6
7
|
#triangle-down { width : 0 ; height : 0 ; border-left : 50px solid transparent ; border-right : 50px solid transparent ; border-top : 100px solid red ; } |
最终效果:
CSS代码如下:
1
2
3
4
5
6
7
|
#triangle- left { width : 0 ; height : 0 ; border-top : 50px solid transparent ; border-right : 100px solid red ; border-bottom : 50px solid transparent ; } |
最终效果:
CSS代码如下:
1
2
3
4
5
6
7
|
#triangle- right { width : 0 ; height : 0 ; border-top : 50px solid transparent ; border-left : 100px solid red ; border-bottom : 50px solid transparent ; } |
最终效果:
CSS代码如下:
1
2
3
4
5
6
|
#triangle-topleft { width : 0 ; height : 0 ; border-top : 100px solid red ; border-right : 100px solid transparent ; } |
最终效果:
CSS代码如下:
1
2
3
4
5
6
7
|
#triangle-topright { width : 0 ; height : 0 ; border-top : 100px solid red ; border-left : 100px solid transparent ; } |
最终效果:
CSS代码如下:
1
2
3
4
5
6
|
#triangle-bottomleft { width : 0 ; height : 0 ; border-bottom : 100px solid red ; border-right : 100px solid transparent ; } |
最终效果:
CSS代码如下:
1
2
3
4
5
6
|
#triangle-bottomright { width : 0 ; height : 0 ; border-bottom : 100px solid red ; border-left : 100px solid transparent ; } |
最终效果:
CSS代码如下:
1
2
3
4
5
6
7
8
9
|
#parallelogram { width : 150px ; height : 100px ; margin-left : 20px ; -webkit-transform: skew( 20 deg); -moz-transform: skew( 20 deg); -o-transform: skew( 20 deg); background : red ; } |
最终效果:
CSS代码如下:
1
2
3
4
5
6
7
|
#trapezoid { border-bottom : 100px solid red ; border-left : 50px solid transparent ; border-right : 50px solid transparent ; height : 0 ; width : 100px ; } |
最终效果:
CSS代码如下:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
#star-six { width : 0 ; height : 0 ; border-left : 50px solid transparent ; border-right : 50px solid transparent ; border-bottom : 100px solid red ; position : relative ; } #star-six:after { width : 0 ; height : 0 ; border-left : 50px solid transparent ; border-right : 50px solid transparent ; border-top : 100px solid red ; position : absolute ; content : "" ; top : 30px ; left : -50px ; } |
最终效果:
CSS代码如下:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
|
#star-five { margin : 50px 0 ; position : relative ; display : block ; color : red ; width : 0px ; height : 0px ; border-right : 100px solid transparent ; border-bottom : 70px solid red ; border-left : 100px solid transparent ; -moz-transform: rotate( 35 deg); -webkit-transform: rotate( 35 deg); -ms-transform: rotate( 35 deg); -o-transform: rotate( 35 deg); } #star-five:before { border-bottom : 80px solid red ; border-left : 30px solid transparent ; border-right : 30px solid transparent ; position : absolute ; height : 0 ; width : 0 ; top : -45px ; left : -65px ; display : block ; content : '' ; -webkit-transform: rotate( -35 deg); -moz-transform: rotate( -35 deg); -ms-transform: rotate( -35 deg); -o-transform: rotate( -35 deg); } #star-five:after { position : absolute ; display : block ; color : red ; top : 3px ; left : -105px ; width : 0px ; height : 0px ; border-right : 100px solid transparent ; border-bottom : 70px solid red ; border-left : 100px solid transparent ; -webkit-transform: rotate( -70 deg); -moz-transform: rotate( -70 deg); -ms-transform: rotate( -70 deg); -o-transform: rotate( -70 deg); content : '' ; } |
最终效果:
CSS代码如下:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
#pentagon { position : relative ; width : 54px ; 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 ; } |
最终效果:
CSS代码如下:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
|
#hexagon { width : 100px ; height : 55px ; background : red ; position : relative ; } #hexagon:before { content : "" ; position : absolute ; top : -25px ; left : 0 ; width : 0 ; height : 0 ; border-left : 50px solid transparent ; border-right : 50px solid transparent ; border-bottom : 25px solid red ; } #hexagon:after { content : "" ; position : absolute ; bottom : -25px ; left : 0 ; width : 0 ; height : 0 ; border-left : 50px solid transparent ; border-right : 50px solid transparent ; border-top : 25px solid red ; } |
最终效果:
CSS代码如下:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
|
#octagon { width : 100px ; height : 100px ; background : red ; position : relative ; } #octagon:before { content : "" ; position : absolute ; top : 0 ; left : 0 ; border-bottom : 29px solid red ; border-left : 29px solid #eee ; border-right : 29px solid #eee ; width : 42px ; height : 0 ; } #octagon:after { content : "" ; position : absolute ; bottom : 0 ; left : 0 ; border-top : 29px solid red ; border-left : 29px solid #eee ; border-right : 29px solid #eee ; width : 42px ; height : 0 ; } |
最终效果:
CSS代码如下:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
|
#heart { position : relative ; width : 100px ; height : 90px ; } #heart:before, #heart:after { position : absolute ; content : "" ; left : 50px ; top : 0 ; width : 50px ; height : 80px ; background : red ; -moz-border-radius: 50px 50px 0 0 ; border-radius: 50px 50px 0 0 ; -webkit-transform: rotate( -45 deg); -moz-transform: rotate( -45 deg); -ms-transform: rotate( -45 deg); -o-transform: rotate( -45 deg); transform: rotate( -45 deg); -webkit-transform-origin: 0 100% ; -moz-transform-origin: 0 100% ; -ms-transform-origin: 0 100% ; -o-transform-origin: 0 100% ; transform-origin: 0 100% ; } #heart:after { left : 0 ; -webkit-transform: rotate( 45 deg); -moz-transform: rotate( 45 deg); -ms-transform: rotate( 45 deg); -o-transform: rotate( 45 deg); transform: rotate( 45 deg); -webkit-transform-origin: 100% 100% ; -moz-transform-origin: 100% 100% ; -ms-transform-origin: 100% 100% ; -o-transform-origin: 100% 100% ; transform-origin : 100% 100% ; } |
最终效果:
CSS代码如下:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
|
#infinity { position : relative ; width : 212px ; height : 100px ; } #infinity:before, #infinity:after { content : "" ; position : absolute ; top : 0 ; left : 0 ; width : 60px ; height : 60px ; border : 20px solid red ; -moz-border-radius: 50px 50px 0 50px ; border-radius: 50px 50px 0 50px ; -webkit-transform: rotate( -45 deg); -moz-transform: rotate( -45 deg); -ms-transform: rotate( -45 deg); -o-transform: rotate( -45 deg); transform: rotate( -45 deg); } #infinity:after { left : auto ; right : 0 ; -moz-border-radius: 50px 50px 50px 0 ; border-radius: 50px 50px 50px 0 ; -webkit-transform: rotate( 45 deg); -moz-transform: rotate( 45 deg); -ms-transform: rotate( 45 deg); -o-transform: rotate( 45 deg); transform: rotate( 45 deg); } |
最终效果
CSS代码如下:
1
2
3
4
5
6
7
8
|
#egg { display : block ; width : 126px ; height : 180px ; background-color : red ; -webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px ; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40% ; } |
最终效果:
CSS代码如下:
1
2
3
4
5
6
7
8
9
10
11
12
|
#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 ; } |
最终效果:
CSS代码如下:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
#talkbubble { width : 120px ; height : 80px ; background : red ; position : relative ; -moz-border-radius: 10px ; -webkit-border-radius: 10px ; border-radius: 10px ; } #talkbubble:before { content : "" ; position : absolute ; right : 100% ; top : 26px ; width : 0 ; height : 0 ; border-top : 13px solid transparent ; border-right : 26px solid red ; border-bottom : 13px solid transparent ; } |
最终效果:
CSS代码如下:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
|
#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 { -webkit-transform: rotate( 30 deg); -moz-transform: rotate( 30 deg); -ms-transform: rotate( 30 deg); -o-transform: rotate( 30 deg); transform: rotate( 30 deg); } #burst -12: after { -webkit-transform: rotate( 60 deg); -moz-transform: rotate( 60 deg); -ms-transform: rotate( 60 deg); -o-transform: rotate( 60 deg); transform: rotate( 60 deg); } |
最终效果:
CSS代码如下:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
#burst -8 { background : red ; width : 80px ; height : 80px ; position : relative ; text-align : center ; -webkit-transform: rotate( 20 deg); -moz-transform: rotate( 20 deg); -ms-transform: rotate( 20 deg); -o-transform: rotate( 20 eg); transform: rotate( 20 deg); } #burst -8: before { content : "" ; position : absolute ; top : 0 ; left : 0 ; height : 80px ; width : 80px ; background : red ; -webkit-transform: rotate( 135 deg); -moz-transform: rotate( 135 deg); -ms-transform: rotate( 135 deg); -o-transform: rotate( 135 deg); transform: rotate( 135 deg); } |
最终效果:
CSS代码如下:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
#cut-diamond { border-style : solid ; border-color : transparent transparent red transparent ; border-width : 0 25px 25px 25px ; height : 0 ; width : 50px ; 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 ; } |
CSS代码如下:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
|
#yin-yang { width : 96px ; 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 ; } #yin-yang:after { content : "" ; position : absolute ; top : 50% ; left : 50% ; background : red ; border : 18px solid #eee ; border-radius: 100% ; width : 12px ; height : 12px ; } |
好了,就到这里了,一共28个,个人觉得后面几个比较犀利。这些代码的来源是css-tricks。由青藤屋博客整理,转载请保留原文链接:
http://www.itivy.com/ivy/archive/2012/1/16/css-shape.html