纯CSS画的基本图形（矩形、圆形、三角形、多边形、爱心、八卦等），NB么

于 2014-05-12 09:18:55 发布
阅读量603 收藏
点赞数
分类专栏： CSS

纯CSS画的基本图形（矩形、圆形、三角形、多边形、爱心、八卦等），NB么

今天在css-tricks上看到一篇文章，那篇文章让我不禁心头一震，强大的CSS啊，居然能画出这么多基本的图形。图形包括基本的矩形、圆形、椭圆、三角形、多边形，也包括稍微复杂一点的爱心、钻石、阴阳八卦等。当然有一些需要用到CSS3的属性，所以在你打开这篇文章的时候，我希望你用的是firefox或者chrome，当然IE也能看一部分的。那好，下面就一起来看看我们是如何用纯CSS来画这些图形的，如果你也觉得很震撼，推荐给你的朋友吧。

1、正方形

最终效果：

CSS代码如下：

1
2
3
4
5
# square {
     width : 100px ;
     height : 100px ;
     background : red ;
}
2、长方形

最终效果：

CSS代码如下：

1
2
3
4
5
#rectangle {
     width : 200px ;
     height : 100px ;
     background : red ;
}
3、圆形

最终效果：

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 ;
}
4、椭圆

最终效果：

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 ;
}
5、上三角

最终效果：

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 ;
}
6、下三角

最终效果：

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 ;
}  
7、左三角

最终效果：

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 ;
}
8、右三角

最终效果：

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 ;
}  
9、左上三角

最终效果：

CSS代码如下：

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

最终效果：

CSS代码如下：

1
2
3
4
5
6
7
#triangle-topright {
     width : 0 ;
     height : 0 ;
     border-top : 100px solid red ;
     border-left : 100px solid transparent ;
     
}
11、左下三角

最终效果：

CSS代码如下：

1
2
3
4
5
6
#triangle-bottomleft {
     width : 0 ;
     height : 0 ;
     border-bottom : 100px solid red ;
     border-right : 100px solid transparent ; 
}  
12、右下三角

最终效果：

CSS代码如下：

1
2
3
4
5
6
#triangle-bottomright {
     width : 0 ;
     height : 0 ;
     border-bottom : 100px solid red ;
     border-left : 100px solid transparent ;
}
13、平行四边形

最终效果：

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 ;
}
14、梯形

最终效果：

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 ;
}
15、六角星

最终效果：

 

 

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 ;
}
16、五角星

最终效果：

 

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 : '' ;
}
17、五角大楼

最终效果：

 

 

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 ;
}
18、六边形

最终效果：

 

 

 

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 ;
}
19、八角形

最终效果：

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 ;
}
20、爱心

最终效果：

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% ;
}              
21、无穷大符号

最终效果：

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);
}  
22、鸡蛋

最终效果

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% ;
}
23、食逗人（Pac-Man）

最终效果：

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 ;
}
24、提示对话框

最终效果：

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 ;
}
25、12角星

最终效果：

 

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);
}
26、8角星

最终效果：

 

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);
}
27、钻石

最终效果：

 

 

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 ;
}
28、阴阳八卦（霸气的这个）

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
记得微笑
关注
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值