今天在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
相关推荐
图形包括基本的矩形、圆形、椭圆、三角形、多边形,也包括稍微复杂一点的爱心、钻石、阴阳八卦等。当然有一些需要用到CSS3的属性,所以在你打开这篇文章的时候,我希望你用的是firefox或者chrome,当然IE也能看一...
用纯css绘制三角形,不是用图片
纯css绘制几何图形,三角形、圆形(半圆、1/4圆)、多边形(平行四边形、梯形、五边形、六边形、八边形)
主要介绍了CSS3 画基本图形,圆形、椭圆形、三角形等的相关资料,需要的朋友可以参考下
1.资源内容:地图插件的多边形,矩形,圆形等图形绘制; 2.使用技术:地图插件,HTML5,CSS3,Jquey等;
纯CSS写带边框的三角形
网页动画素材 css3属性绘制圆形旋转的黑洞动画特效(抖音资料)网页动画素材 css3属性绘制圆形旋转的黑洞动画特效(抖音资料)网页动画素材 css3属性绘制圆形旋转的黑洞动画特效(抖音资料)网页动画素材 css3属性...
纯css3旋转3D立方体多边形动画特效
纯css3绘制各种图形图标样式代码
纯css3清新风格的圆形立体时钟走动样式代码 纯css3清新风格的圆形立体时钟走动样式代码 纯css3清新风格的圆形立体时钟走动样式代码
还在为网页太多图片加载太慢而发愁吗?纯CSS打造三角形,不需要用图片了!
纯CSS实现多彩三角形有序变化特效动画时尚背景墙。
一个纯CSS3的红色爱心跳动动画,爱心的形状是利用纯CSS3绘制出来的,结合CSS3的动画属性实现跳动的动画特效。
CSS3确实非常强大,我们之前也领略过CSS3绘制的各种图形和实现的各种动画,比如非常逼真的CSS3人物行走动画,也比如这100多个纯CSS3动画图标。今天要分享的是用纯CSS3绘制的50多个图形和图标,有些图形还带有动画...
采用纯css实现圆角矩形的方法。付源码及代码讲解。
纯css3实现各种图形样式是一款纯css3样式属性制作各种图形图标样式代码。
这是一款效果非常炫酷的纯CSS3圆形图片鼠标滑过旋转翻盖特效。该CSS3特效中,当鼠标滑过圆形图片时,图片以顶边的一个定位点为中心向下旋转,显示出下面的圆形说明文本。
纯CSS3几何图形圆点动画特效是一款css3基于animation属性制作密集圆点几何图形动画特效。