码迷,mamicode.com
首页 > Web开发 > 详细

各种纯css图标

时间:2016-08-29 22:38:45      阅读:315      评论:0      收藏:0      [点我收藏+]

标签:

CSS3可以实现很多漂亮的图形,我收集了32种图形,在下面列出。直接用CSS3画出这些图形,要比贴图性能更好,体验更加,是一种非常好的网页美观方式。

      这32种图形分别为圆形,椭圆形,三角形,倒三角形,左三角形,右三角形,菱形,梯形,长方形,正方形,圆环,平行四边形,五角星,六角星,五边形,六边形,八边形,心形,蛋形,无穷符号,消息提示框,钻石,八卦图,食豆人,扇形,月牙,顶左直角三角形,顶右直角三角形 ,底左直角三角形 ,底右直角三角形 ,八角形, 十二角形。
      网页代码中用到(<!-- 浮动Div换行 --> <div style="clear:both">)和Div边距设置和浮动(margin: 20px 20px; float: left;

1. 圆形:设置宽度和高度相等,border-radius属性为宽度或高度的一半。

     效果图:

                    技术分享

1
2
3
4
5
6
7
8
9
#Circle{ 
  width:100px
  height:100px
  floatleft
  background#6fee1d
  -moz-border-radius: 50px
  -webkit-border-radius: 50px
  border-radius: 50px
}

 2.椭圆形:圆形的变体,高度设置为宽度的一半,border-radius属性为高度除以高度一半。

    效果图:

                 技术分享

1
2
3
4
5
6
7
8
9
#Oval { 
   width200px
   height100px
   floatleft
   background#e9880c
   -webkit-border-radius: 100px 50px
   -moz-border-radius: 100px 50px
   border-radius: 100px 50px
 }

  

3.三角形:宽度和高度设置为0,border设置左,右边透明,底边可见Solid。

    效果图:

                 技术分享

技术分享
技术分享
#Triangle {  
   width: 0;  
   height: 0;  
   float: left;  
   border-bottom: 100px solid #fcf706;  
   border-left: 50px solid transparent;  
   border-right: 50px solid transparent;  
 } 
技术分享
技术分享

  4.倒三角形:宽度和高度设置为0,border设置左,右边透明,顶边可见Solid。

    效果图:

             技术分享

1
2
3
4
5
6
7
8
#InvertedTriangle { 
   width0
   height0
   floatleft
   border-top100px solid #30a3bf
   border-left50px solid transparent
   border-right50px solid transparent
 }

  

5.左三角形:宽度和高度设置为0,border设置上,下边透明,右边可见Solid。

    效果图:

              技术分享

 

1
2
3
4
5
6
7
8
#LeftTriangle { 
  width0
  height0
  floatleft
  border-top50px solid transparent
  border-right100px solid #466f20
  border-bottom50px solid transparent

6.菱形:使用transform和rotate相结合,使两个正反三角形上下显示。

     效果图:

           技术分享

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
#Diamond { 
  width100px
  height100px
  floatleft
  background#8e00ff
  /* Rotate */ 
  -webkit-transform: rotate(-45deg); 
  -moz-transform: rotate(-45deg); 
  -ms-transform: rotate(-45deg); 
  -o-transform: rotate(-45deg); 
  transform: rotate(-45deg); 
  /* Rotate Origin */ 
  -webkit-transform-origin: 0 100%
  -moz-transform-origin: 0 100%
  -ms-transform-origin: 0 100%
  -o-transform-origin: 0 100%
  transform-origin: 0 100%
  margin40px 0 10px 240px
 }

  

7.梯形:三角形的变体,设置左右两条边相等,并且给它设置一个宽度。

    效果图:

              技术分享

1
2
3
4
5
6
7
8
#Trapezium { 
 height0
 width100px
 floatleft
 border-bottom100px solid #dc2500
 border-left50px solid transparent
 border-right50px solid transparent

8.圆环:在圆形的基础上设置边界,边界颜色与圆形填充颜色不同。

      效果图:

          技术分享

1
2
3
4
5
6
7
8
#Ring { 
 width100px
 height100px
 floatleft
 background-colorwhite
 border-radius: 80px
 border:5px #ffd700 solid
}

  

9.平行四边形:使用transform使长方形倾斜一个角度。

     效果图:

             技术分享

  

  

1
2
3
4
5
6
7
8
9
10
11
#Parallelogram { 
 width120px
 height80px
 floatleft
 margin-left10px
 -webkit-transform: skew(30deg); 
 -moz-transform: skew(30deg); 
 -o-transform: skew(30deg); 
 transform: skew(30deg); 
 background-color#2eda01
}

  

10.五角星:星形的实现方式比较复杂,主要是使用transform属性来旋转不同的边。

      效果图:

         技术分享

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
#FiveStar { 
   width0
   height0
   floatleft
   margin20px 20px
   color#ff0012
   positionrelative
   displayblock
   border-right80px solid transparent
   border-bottom60px solid #ff0012
   border-left80px solid transparent
   -moz-transform: rotate(35deg); 
   -webkit-transform: rotate(35deg); 
   -ms-transform: rotate(35deg); 
   -o-transform: rotate(35deg); 
 
 #FiveStar:before { 
   height0
   width0
   content‘‘
   positionabsolute
   displayblock
   top-35px
   left-50px
   border-bottom60px solid #ff0012
   border-left20px solid transparent
   border-right20px solid transparent
   -webkit-transform: rotate(-35deg); 
   -moz-transform: rotate(-35deg); 
   -ms-transform: rotate(-35deg); 
   -o-transform: rotate(-35deg); 
 
 #FiveStar:after { 
   width0
   height0
   content‘‘
   positionabsolute
   displayblock
   top3px
   left-85px
   color#ff0012
   border-right80px solid transparent
   border-bottom60px solid #ff0012
   border-left80px solid transparent
   -webkit-transform: rotate(-70deg); 
   -moz-transform: rotate(-70deg); 
   -ms-transform: rotate(-70deg); 
   -o-transform: rotate(-70deg); 
 

 

11.六角星:使用transform属性来旋转不同的边。

     效果图:

           技术分享

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
#SixStar{ 
  width0
  height0
  floatleft
  border-left50px solid transparent
  border-right50px solid transparent
  border-bottom100px solid #cfd810
  positionrelative
 
 #SixStar:after{ 
  width0
  height0
  content""
  border-top100px solid #cfd810
  border-left50px solid transparent
  border-right50px solid transparent
  positionabsolute
  top30px
  left-50px
 }

  

  

12.六边形:在长方形上面和下面各放置一个三角形。

       效果图:

             技术分享   

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
#Hexagon { 
   width100px
   height55px
   floatleft
   background#000001
   positionrelative
   margin10px auto
 
 #Hexagon:before { 
   content""
   width0
   height0
   positionabsolute
   top-25px
   left0
   border-left50px solid transparent
   border-right50px solid transparent
   border-bottom25px solid #000001
#Hexagon:after { 
  content""
  width0
  height0
  positionabsolute
  bottom-25px
  left0
  border-left50px solid transparent
  border-right50px solid transparent
  border-top25px solid #000001
}

 

13.五边形:可以采用三角形和梯形组合。

       效果图:

               技术分享

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
#Pentagon{ 
  width60px
  floatleft
  positionrelative
  border-width52px 20px 0
  border-stylesolid
  border-color#711ee2 transparent
#Pentagon:before{ 
  content""
  positionabsolute
  width0
  height0
  top-92px
  left-20px
  border-width0 50px 40px
  border-stylesolid
  border-colortransparent transparent #711ee2

  

 

  14.八边形:在长方形上面和下面各放置一个梯形。

    效果图:

           技术分享

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{ 
  width100px
  height100px
  floatleft
  margin10px 10px
  background-color#66e006
  positionrelative
 
 #Octagon:before{ 
  width42px
  height0
  top0
  left0
  positionabsolute
  content""
  border-left29px solid #ffffff
  border-right29px solid #ffffff
  border-bottom29px solid #66e006
 
 #Octagon:after{ 
  width42px
  height0
  left0
  bottom0
  positionabsolute
  content""
  border-left29px solid #ffffff
  border-right29px solid #ffffff
  border-top29px solid #66e006
 

  

 15.心形:心形的制作是非常复杂的,可以使用伪元素来制作,分别将伪元素旋转不同的角度,并修改transform-origin属性来设置元素的旋转中心点。

     效果图:

        技术分享

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
#Heart { 
  floatleft
  positionrelative
 
 #Heart:before, #Heart:after { 
  content""
  width70px
  height115px
  positionabsolute
  backgroundred
  left70px
  top0
  -webkit-border-radius: 50px 50px 0 0
  -moz-border-radius: 50px 50px 0 0
  border-radius: 50px 50px 0 0
  -webkit-transform: rotate(-45deg); 
  -moz-transform: rotate(-45deg); 
  -ms-transform: rotate(-45deg); 
  -o-transform: rotate(-45deg); 
  transform: rotate(-45deg); 
  -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 { 
  left0
  -webkit-transform: rotate(45deg); 
  -moz-transform: rotate(45deg); 
  -ms-transform: rotate(45deg); 
  -o-transform: rotate(45deg); 
  transform: rotate(45deg); 
  -webkit-transform-origin: 100% 100%
  -moz-transform-origin: 100% 100%
  -ms-transform-origin: 100% 100%
  -o-transform-origin: 100% 100%
  transform-origin: 100% 100%
 

  16.蛋形:椭圆形的变体,高度比宽度稍大,设置正确的border-radius属性。

     效果图:

          技术分享

1
2
3
4
5
6
7
8
9
#Egg { 
  width100px
  height160px
  floatleft
  background#ffb028
  displayblock
  -webkit-border-radius: 60px 60px 60px 60px 100px 100px 68px 68px
  border-radius: 50% 50% 50% 50% 60% 60% 40% 40%
 

  

17.无穷符号:通过border属性和设置伪元素的角度来实现。

     效果图:

             技术分享

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
#Infinity { 
  width220px
  height100px
  floatleft
  positionrelative
 
 #Infinity:before, #Infinity:after { 
  content""
  width60px
  height60px
  positionabsolute
  top0
  left0
  border20px solid #008bb0
  -moz-border-radius: 50px 50px 0
  border-radius: 50px 50px 0 50px
  -webkit-transform: rotate(-45deg); 
  -moz-transform: rotate(-45deg); 
  -ms-transform: rotate(-45deg); 
  -o-transform: rotate(-45deg); 
  transform: rotate(-45deg); 
 
 #Infinity:after { 
  leftauto
  right0
  -moz-border-radius: 50px 50px 50px 0
  border-radius: 50px 50px 50px 0
  -webkit-transform: rotate(45deg); 
  -moz-transform: rotate(45deg); 
  -ms-transform: rotate(45deg); 
  -o-transform: rotate(45deg); 
  transform: rotate(45deg); 
 

  18.消息提示框:一个圆角矩形加左边中间的一个小三角形。

 

     效果图:

           技术分享

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
#CommentBubble { 
   width140px
   height100px
   margin30px 20px
   floatleft
   background#8867b9
   positionrelative
   -moz-border-radius: 12px
   -webkit-border-radius: 12px
   border-radius: 12px
 
 #CommentBubble:before { 
   content""
   width0
   height0
   right100%
   top38px
   positionabsolute
   border-top13px solid transparent
   border-right26px solid #8867b9
   border-bottom13px solid transparent
 

  19.钻石:上面一个梯形,下面一个三角形组成。

      效果图:

             技术分享

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
#Diamonds{ 
  width50px
  height0
  floatleft
  border-stylesolid
  border-colortransparent transparent #9aff02 transparent
  border-width0 25px 25px 25px
  positionrelative
  margin20px 0 50px 0
#Diamonds:after{ 
  width0
  height0
  top25px
  left-25px
  border-stylesolid
  border-color#9aff02 transparent transparent transparent
  border-width70px 50px 0 50px
  positionabsolute
  content""
 

   20.八卦图:多个圆形的组合。

       效果图:

          技术分享

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
#EightDiagrams{ 
  width96px
  height48px
  margin20px 20px
  floatleft
  background-color#ffffff
  border-color#000000
  border-stylesolid
  border-width2px 2px 50px 2px
  border-radius: 100%
  positionrelative
 
 #EightDiagrams:before { 
  width12px
  height12px
  top50%
  left0
  content""
  positionabsolute
  background-color#ffffff
  border18px solid #000000
  border-radius: 100%
 
 #EightDiagrams:after { 
  width12px
  height12px
  top50%
  left50%
  background-color#000000
  border18px solid #ffffff
  border-radius:100%
  content""
  positionabsolute
 

     21.食豆人:设置border和border-top-left-radius,border-bottom-right-radius等属性。

       效果图:

        技术分享

1
2
3
4
5
6
7
8
9
10
11
12
13
#PacMan { 
 width0
 height0
 floatleft
 border-right60px solid transparent
 border-left60px solid #300fed
 border-top60px solid #300fed
 border-bottom60px solid #300fed
 border-top-left-radius: 60px
 border-top-right-radius: 60px
 border-bottom-left-radius: 60px
 border-bottom-right-radius: 60px

   22.扇形:在三角形的基础上,让其中一边成弧形 。

       效果图:

          技术分享

1
2
3
4
5
6
7
8
9
10
#Sector { 
   width:0
   height:0
   floatleft
   background-color#ffffff
   border-left70px solid transparent
   border-right70px solid transparent
   border-top100px solid #ab9ed1
   border-radius:50%
 

  23.月牙:由两条弧线组成的,每个弧线可以看成一个圆的一部分弧长,在圆的基础上让圆有一个阴影可以形成一个月牙。

        效果图:

            技术分享

1
2
3
4
5
6
7
8
#CrescentMoon{ 
   width:80px
   height:80px
   floatleft
   background-color#ffffff
   border-radius:50%
   box-shadow: 15px 15px 0 0 #9600d2
 

  24.顶左直角三角形。

       效果图:

          技术分享

1
2
3
4
5
6
7
8
#TopLeftTriangle { 
   width0px
   height0px
   margin10px 10px
   floatleft
   border-top100px solid #7efde1
   border-right100px solid transparent
 }

  25.八角形。

        效果图:

                  技术分享

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
#Burst8 
 width80px
 height80px
 margin10px 10px
 floatleft
 background-color#cf7668
 positionrelative
 transform:rotate(20deg); 
 -webkit-transform:rotate(20deg); 
 -ms-transform:rotate(20deg); 
 -moz-transform:rotate(20deg); 
 -o-transform:rotate(20deg); 
#Burst8:before{ 
 width80px
 height80px
 top0
 left0
 background-color#cf7668
 positionabsolute
 content""
 transform:rotate(135deg); 
 -webkit-transform:rotate(135deg); 
 -ms-transform:rotate(135deg); 
 -moz-transform:rotate(135deg); 
 -o-transform:rotate(135deg); 

 26.十二角形。

          效果图:

             技术分享

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
#Burst12 
   width80px
   height80px
   margin20px 20px
   floatleft
   background-color#a8ff26
   positionrelative
   text-aligncenter
 
 #Burst12:before, #Burst12:after{ 
   width80px
   height80px
   top0
   left0
   background-color#a8ff26
   positionabsolute
   content""
 
 #Burst12:before{ 
   transform:rotate(30deg); 
   -webkit-transform:rotate(30deg); 
   -ms-transform:rotate(30deg); 
   -moz-transform:rotate(30deg); 
   -o-transform:rotate(30deg); 
 
 #Burst12:after{ 
   transform:rotate(60deg); 
   -webkit-transform:rotate(60deg); 
   -ms-transform:rotate(60deg); 
   -moz-transform:rotate(60deg); 
   -o-transform:rotate(60deg); 
 

  完整的CSS3+HTML5代码:

CSS3可以实现很多漂亮的图形,我收集了32种图形,在下面列出。直接用CSS3画出这些图形,要比贴图性能更好,体验更加,是一种非常好的网页美观方式。

      这32种图形分别为圆形,椭圆形,三角形,倒三角形,左三角形,右三角形,菱形,梯形,长方形,正方形,圆环,平行四边形,五角星,六角星,五边形,六边形,八边形,心形,蛋形,无穷符号,消息提示框,钻石,八卦图,食豆人,扇形,月牙,顶左直角三角形,顶右直角三角形 ,底左直角三角形 ,底右直角三角形 ,八角形, 十二角形。
      网页代码中用到(<!-- 浮动Div换行 --> <div style="clear:both">)和Div边距设置和浮动(margin: 20px 20px; float: left;

1. 圆形:设置宽度和高度相等,border-radius属性为宽度或高度的一半。

     效果图:

                    技术分享

1
2
3
4
5
6
7
8
9
#Circle{ 
  width:100px
  height:100px
  floatleft
  background#6fee1d
  -moz-border-radius: 50px
  -webkit-border-radius: 50px
  border-radius: 50px
}

 2.椭圆形:圆形的变体,高度设置为宽度的一半,border-radius属性为高度除以高度一半。

    效果图:

                 技术分享

1
2
3
4
5
6
7
8
9
#Oval { 
   width200px
   height100px
   floatleft
   background#e9880c
   -webkit-border-radius: 100px 50px
   -moz-border-radius: 100px 50px
   border-radius: 100px 50px
 }

  

3.三角形:宽度和高度设置为0,border设置左,右边透明,底边可见Solid。

    效果图:

                 技术分享

技术分享
技术分享
#Triangle {  
   width: 0;  
   height: 0;  
   float: left;  
   border-bottom: 100px solid #fcf706;  
   border-left: 50px solid transparent;  
   border-right: 50px solid transparent;  
 } 
技术分享
技术分享

  4.倒三角形:宽度和高度设置为0,border设置左,右边透明,顶边可见Solid。

    效果图:

             技术分享

1
2
3
4
5
6
7
8
#InvertedTriangle { 
   width0
   height0
   floatleft
   border-top100px solid #30a3bf
   border-left50px solid transparent
   border-right50px solid transparent
 }

  

5.左三角形:宽度和高度设置为0,border设置上,下边透明,右边可见Solid。

    效果图:

              技术分享

 

1
2
3
4
5
6
7
8
#LeftTriangle { 
  width0
  height0
  floatleft
  border-top50px solid transparent
  border-right100px solid #466f20
  border-bottom50px solid transparent

6.菱形:使用transform和rotate相结合,使两个正反三角形上下显示。

     效果图:

           技术分享

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
#Diamond { 
  width100px
  height100px
  floatleft
  background#8e00ff
  /* Rotate */ 
  -webkit-transform: rotate(-45deg); 
  -moz-transform: rotate(-45deg); 
  -ms-transform: rotate(-45deg); 
  -o-transform: rotate(-45deg); 
  transform: rotate(-45deg); 
  /* Rotate Origin */ 
  -webkit-transform-origin: 0 100%
  -moz-transform-origin: 0 100%
  -ms-transform-origin: 0 100%
  -o-transform-origin: 0 100%
  transform-origin: 0 100%
  margin40px 0 10px 240px
 }

  

7.梯形:三角形的变体,设置左右两条边相等,并且给它设置一个宽度。

    效果图:

              技术分享

1
2
3
4
5
6
7
8
#Trapezium { 
 height0
 width100px
 floatleft
 border-bottom100px solid #dc2500
 border-left50px solid transparent
 border-right50px solid transparent

8.圆环:在圆形的基础上设置边界,边界颜色与圆形填充颜色不同。

      效果图:

          技术分享

1
2
3
4
5
6
7
8
#Ring { 
 width100px
 height100px
 floatleft
 background-colorwhite
 border-radius: 80px
 border:5px #ffd700 solid
}

  

9.平行四边形:使用transform使长方形倾斜一个角度。

     效果图:

             技术分享

  

  

1
2
3
4
5
6
7
8
9
10
11
#Parallelogram { 
 width120px
 height80px
 floatleft
 margin-left10px
 -webkit-transform: skew(30deg); 
 -moz-transform: skew(30deg); 
 -o-transform: skew(30deg); 
 transform: skew(30deg); 
 background-color#2eda01
}

  

10.五角星:星形的实现方式比较复杂,主要是使用transform属性来旋转不同的边。

      效果图:

         技术分享

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
#FiveStar { 
   width0
   height0
   floatleft
   margin20px 20px
   color#ff0012
   positionrelative
   displayblock
   border-right80px solid transparent
   border-bottom60px solid #ff0012
   border-left80px solid transparent
   -moz-transform: rotate(35deg); 
   -webkit-transform: rotate(35deg); 
   -ms-transform: rotate(35deg); 
   -o-transform: rotate(35deg); 
 
 #FiveStar:before { 
   height0
   width0
   content‘‘
   positionabsolute
   displayblock
   top-35px
   left-50px
   border-bottom60px solid #ff0012
   border-left20px solid transparent
   border-right20px solid transparent
   -webkit-transform: rotate(-35deg); 
   -moz-transform: rotate(-35deg); 
   -ms-transform: rotate(-35deg); 
   -o-transform: rotate(-35deg); 
 
 #FiveStar:after { 
   width0
   height0
   content‘‘
   positionabsolute
   displayblock
   top3px
   left-85px
   color#ff0012
   border-right80px solid transparent
   border-bottom60px solid #ff0012
   border-left80px solid transparent
   -webkit-transform: rotate(-70deg); 
   -moz-transform: rotate(-70deg); 
   -ms-transform: rotate(-70deg); 
   -o-transform: rotate(-70deg); 
 

 

11.六角星:使用transform属性来旋转不同的边。

     效果图:

           技术分享

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
#SixStar{ 
  width0
  height0
  floatleft
  border-left50px solid transparent
  border-right50px solid transparent
  border-bottom100px solid #cfd810
  positionrelative
 
 #SixStar:after{ 
  width0
  height0
  content""
  border-top100px solid #cfd810
  border-left50px solid transparent
  border-right50px solid transparent
  positionabsolute
  top30px
  left-50px
 }

  

  

12.六边形:在长方形上面和下面各放置一个三角形。

       效果图:

             技术分享   

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
#Hexagon { 
   width100px
   height55px
   floatleft
   background#000001
   positionrelative
   margin10px auto
 
 #Hexagon:before { 
   content""
   width0
   height0
   positionabsolute
   top-25px
   left0
   border-left50px solid transparent
   border-right50px solid transparent
   border-bottom25px solid #000001
#Hexagon:after { 
  content""
  width0
  height0
  positionabsolute
  bottom-25px
  left0
  border-left50px solid transparent
  border-right50px solid transparent
  border-top25px solid #000001
}

 

13.五边形:可以采用三角形和梯形组合。

       效果图:

               技术分享

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
#Pentagon{ 
  width60px
  floatleft
  positionrelative
  border-width52px 20px 0
  border-stylesolid
  border-color#711ee2 transparent
#Pentagon:before{ 
  content""
  positionabsolute
  width0
  height0
  top-92px
  left-20px
  border-width0 50px 40px
  border-stylesolid
  border-colortransparent transparent #711ee2

  

 

  14.八边形:在长方形上面和下面各放置一个梯形。

    效果图:

           技术分享

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{ 
  width100px
  height100px
  floatleft
  margin10px 10px
  background-color#66e006
  positionrelative
 
 #Octagon:before{ 
  width42px
  height0
  top0
  left0
  positionabsolute
  content""
  border-left29px solid #ffffff
  border-right29px solid #ffffff
  border-bottom29px solid #66e006
 
 #Octagon:after{ 
  width42px
  height0
  left0
  bottom0
  positionabsolute
  content""
  border-left29px solid #ffffff
  border-right29px solid #ffffff
  border-top29px solid #66e006
 

  

 15.心形:心形的制作是非常复杂的,可以使用伪元素来制作,分别将伪元素旋转不同的角度,并修改transform-origin属性来设置元素的旋转中心点。

     效果图:

        技术分享

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
#Heart { 
  floatleft
  positionrelative
 
 #Heart:before, #Heart:after { 
  content""
  width70px
  height115px
  positionabsolute
  backgroundred
  left70px
  top0
  -webkit-border-radius: 50px 50px 0 0
  -moz-border-radius: 50px 50px 0 0
  border-radius: 50px 50px 0 0
  -webkit-transform: rotate(-45deg); 
  -moz-transform: rotate(-45deg); 
  -ms-transform: rotate(-45deg); 
  -o-transform: rotate(-45deg); 
  transform: rotate(-45deg); 
  -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 { 
  left0
  -webkit-transform: rotate(45deg); 
  -moz-transform: rotate(45deg); 
  -ms-transform: rotate(45deg); 
  -o-transform: rotate(45deg); 
  transform: rotate(45deg); 
  -webkit-transform-origin: 100% 100%
  -moz-transform-origin: 100% 100%
  -ms-transform-origin: 100% 100%
  -o-transform-origin: 100% 100%
  transform-origin: 100% 100%
 

  16.蛋形:椭圆形的变体,高度比宽度稍大,设置正确的border-radius属性。

     效果图:

          技术分享

1
2
3
4
5
6
7
8
9
#Egg { 
  width100px
  height160px
  floatleft
  background#ffb028
  displayblock
  -webkit-border-radius: 60px 60px 60px 60px 100px 100px 68px 68px
  border-radius: 50% 50% 50% 50% 60% 60% 40% 40%
 

  

17.无穷符号:通过border属性和设置伪元素的角度来实现。

     效果图:

             技术分享

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
#Infinity { 
  width220px
  height100px
  floatleft
  positionrelative
 
 #Infinity:before, #Infinity:after { 
  content""
  width60px
  height60px
  positionabsolute
  top0
  left0
  border20px solid #008bb0
  -moz-border-radius: 50px 50px 0
  border-radius: 50px 50px 0 50px
  -webkit-transform: rotate(-45deg); 
  -moz-transform: rotate(-45deg); 
  -ms-transform: rotate(-45deg); 
  -o-transform: rotate(-45deg); 
  transform: rotate(-45deg); 
 
 #Infinity:after { 
  leftauto
  right0
  -moz-border-radius: 50px 50px 50px 0
  border-radius: 50px 50px 50px 0
  -webkit-transform: rotate(45deg); 
  -moz-transform: rotate(45deg); 
  -ms-transform: rotate(45deg); 
  -o-transform: rotate(45deg); 
  transform: rotate(45deg); 
 

  18.消息提示框:一个圆角矩形加左边中间的一个小三角形。

 

     效果图:

           技术分享

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
#CommentBubble { 
   width140px
   height100px
   margin30px 20px
   floatleft
   background#8867b9
   positionrelative
   -moz-border-radius: 12px
   -webkit-border-radius: 12px
   border-radius: 12px
 
 #CommentBubble:before { 
   content""
   width0
   height0
   right100%
   top38px
   positionabsolute
   border-top13px solid transparent
   border-right26px solid #8867b9
   border-bottom13px solid transparent
 

  19.钻石:上面一个梯形,下面一个三角形组成。

      效果图:

             技术分享

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
#Diamonds{ 
  width50px
  height0
  floatleft
  border-stylesolid
  border-colortransparent transparent #9aff02 transparent
  border-width0 25px 25px 25px
  positionrelative
  margin20px 0 50px 0
#Diamonds:after{ 
  width0
  height0
  top25px
  left-25px
  border-stylesolid
  border-color#9aff02 transparent transparent transparent
  border-width70px 50px 0 50px
  positionabsolute
  content""
 

   20.八卦图:多个圆形的组合。

       效果图:

          技术分享

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
#EightDiagrams{ 
  width96px
  height48px
  margin20px 20px
  floatleft
  background-color#ffffff
  border-color#000000
  border-stylesolid
  border-width2px 2px 50px 2px
  border-radius: 100%
  positionrelative
 
 #EightDiagrams:before { 
  width12px
  height12px
  top50%
  left0
  content""
  positionabsolute
  background-color#ffffff
  border18px solid #000000
  border-radius: 100%
 
 #EightDiagrams:after { 
  width12px
  height12px
  top50%
  left50%
  background-color#000000
  border18px solid #ffffff
  border-radius:100%
  content""
  positionabsolute
 

     21.食豆人:设置border和border-top-left-radius,border-bottom-right-radius等属性。

       效果图:

        技术分享

1
2
3
4
5
6
7
8
9
10
11
12
13
#PacMan { 
 width0
 height0
 floatleft
 border-right60px solid transparent
 border-left60px solid #300fed
 border-top60px solid #300fed
 border-bottom60px solid #300fed
 border-top-left-radius: 60px
 border-top-right-radius: 60px
 border-bottom-left-radius: 60px
 border-bottom-right-radius: 60px

   22.扇形:在三角形的基础上,让其中一边成弧形 。

       效果图:

          技术分享

1
2
3
4
5
6
7
8
9
10
#Sector { 
   width:0
   height:0
   floatleft
   background-color#ffffff
   border-left70px solid transparent
   border-right70px solid transparent
   border-top100px solid #ab9ed1
   border-radius:50%
 

  23.月牙:由两条弧线组成的,每个弧线可以看成一个圆的一部分弧长,在圆的基础上让圆有一个阴影可以形成一个月牙。

        效果图:

            技术分享

1
2
3
4
5
6
7
8
#CrescentMoon{ 
   width:80px
   height:80px
   floatleft
   background-color#ffffff
   border-radius:50%
   box-shadow: 15px 15px 0 0 #9600d2
 

  24.顶左直角三角形。

       效果图:

          技术分享

1
2
3
4
5
6
7
8
#TopLeftTriangle { 
   width0px
   height0px
   margin10px 10px
   floatleft
   border-top100px solid #7efde1
   border-right100px solid transparent
 }

  25.八角形。

        效果图:

                  技术分享

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
#Burst8 
 width80px
 height80px
 margin10px 10px
 floatleft
 background-color#cf7668
 positionrelative
 transform:rotate(20deg); 
 -webkit-transform:rotate(20deg); 
 -ms-transform:rotate(20deg); 
 -moz-transform:rotate(20deg); 
 -o-transform:rotate(20deg); 
#Burst8:before{ 
 width80px
 height80px
 top0
 left0
 background-color#cf7668
 positionabsolute
 content""
 transform:rotate(135deg); 
 -webkit-transform:rotate(135deg); 
 -ms-transform:rotate(135deg); 
 -moz-transform:rotate(135deg); 
 -o-transform:rotate(135deg); 

 26.十二角形。

          效果图:

             技术分享

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
#Burst12 
   width80px
   height80px
   margin20px 20px
   floatleft
   background-color#a8ff26
   positionrelative
   text-aligncenter
 
 #Burst12:before, #Burst12:after{ 
   width80px
   height80px
   top0
   left0
   background-color#a8ff26
   positionabsolute
   content""
 
 #Burst12:before{ 
   transform:rotate(30deg); 
   -webkit-transform:rotate(30deg); 
   -ms-transform:rotate(30deg); 
   -moz-transform:rotate(30deg); 
   -o-transform:rotate(30deg); 
 
 #Burst12:after{ 
   transform:rotate(60deg); 
   -webkit-transform:rotate(60deg); 
   -ms-transform:rotate(60deg); 
   -moz-transform:rotate(60deg); 
   -o-transform:rotate(60deg); 
 

  完整的CSS3+HTML5代码:

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
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
<!DOCTYPE html> 
<html> 
<head> 
  <meta charset="UTF-8"
  <title>CSS3实现基本图形</title> 
  <style> 
   #Circle{ 
     width:100px
     height:100px
     floatleft
     background#6fee1d
     -moz-border-radius: 50px
     -webkit-border-radius: 50px
     border-radius: 50px
   
   #Oval { 
     width200px
     height100px
     floatleft
     background#e9880c
     -webkit-border-radius: 100px 50px
     -moz-border-radius: 100px 50px
     border-radius: 100px 50px
   
   #Triangle { 
     width0
     height0
     floatleft
     border-bottom100px solid #fcf706
     border-left50px solid transparent
     border-right50px solid transparent
   
   #InvertedTriangle { 
     width0
     height0
     floatleft
     border-top100px solid #30a3bf
     border-left50px solid transparent
     border-right50px solid transparent
   
   #LeftTriangle { 
     width0
     height0
     floatleft
     border-top50px solid transparent
     border-right100px solid #466f20
     border-bottom50px solid transparent
   
   #RightTriangle { 
     width0
     height0
     floatleft
     border-top50px solid transparent
     border-left100px solid #800820
     border-bottom50px solid transparent
   
   #Diamond { 
    width100px
    height100px
    floatleft
    background#8e00ff
    /* Rotate */ 
    -webkit-transform: rotate(-45deg); 
    -moz-transform: rotate(-45deg); 
    -ms-transform: rotate(-45deg); 
    -o-transform: rotate(-45deg); 
    transform: rotate(-45deg); 
    /* Rotate Origin */ 
    -webkit-transform-origin: 0 100%
    -moz-transform-origin: 0 100%
    -ms-transform-origin: 0 100%
    -o-transform-origin: 0 100%
    transform-origin: 0 100%
    margin40px 0 10px 240px
   
   #Trapezium { 
    height0
    width100px
    floatleft
    border-bottom100px solid #dc2500
    border-left50px solid transparent
    border-right50px solid transparent
   
   #Rectangle { 
    height50px
    width100px
    floatleft
    background#afe05d
   
   #Square { 
    height100px
    width100px
    floatleft
    background#b02089
   
   #Ring { 
    width100px
    height100px
    floatleft
    background-colorwhite
    border-radius: 80px
    border:5px #ffd700 solid
   
   #Parallelogram { 
    width120px
    height80px
    floatleft
    margin-left10px
    -webkit-transform: skew(30deg); 
    -moz-transform: skew(230deg); 
    -o-transform: skew(30deg); 
    transform: skew(30deg); 
    background-color#2eda01
   
   
   #FiveStar { 
     width0
     height0
     floatleft
     margin20px 20px
     color#ff0012
     positionrelative
     displayblock
     border-right80px solid transparent
     border-bottom60px solid #ff0012
     border-left80px solid transparent
     -moz-transform: rotate(35deg); 
     -webkit-transform: rotate(35deg); 
     -ms-transform: rotate(35deg); 
     -o-transform: rotate(35deg); 
   
   #FiveStar:before { 
     height0
     width0
     content‘‘
     positionabsolute
     displayblock
     top-35px
     left-50px
     border-bottom60px solid #ff0012
     border-left20px solid transparent
     border-right20px solid transparent
     -webkit-transform: rotate(-35deg); 
     -moz-transform: rotate(-35deg); 
     -ms-transform: rotate(-35deg); 
     -o-transform: rotate(-35deg); 
   
   #FiveStar:after { 
     width0
     height0
     content‘‘
     positionabsolute
     displayblock
     top3px
     left-85px
     color#ff0012
     border-right80px solid transparent
     border-bottom60px solid #ff0012
     border-left80px solid transparent
     -webkit-transform: rotate(-70deg); 
     -moz-transform: rotate(-70deg); 
     -ms-transform: rotate(-70deg); 
     -o-transform: rotate(-70deg); 
   
   
   #SixStar{ 
     width0
     height0
     floatleft
     border-left50px solid transparent
     border-right50px solid transparent
     border-bottom100px solid #cfd810
     positionrelative
    
    #SixStar:after{ 
     width0
     height0
     content""
     border-top100px solid #cfd810
     border-left50px solid transparent
     border-right50px solid transparent
     positionabsolute
     top30px
     left-50px
    
   
    #Pentagon{ 
      width60px
      floatleft
      positionrelative
      border-width52px 20px 0
      border-stylesolid
      border-color#711ee2 transparent
    
    #Pentagon:before{ 
      content""
      positionabsolute
      width0
      height0
      top-92px
      left-20px
      border-width0 50px 40px
      border-stylesolid
      border-colortransparent transparent #711ee2
    
   
    #Hexagon { 
      width100px
      height55px
      floatleft
      background#000001
      positionrelative
      margin10px auto
    
    #Hexagon:before { 
      content""
      width0
      height0
      positionabsolute
      top-25px
      left0
      border-left50px solid transparent
      border-right50px solid transparent
      border-bottom25px solid #000001
   
   #Hexagon:after { 
     content""
     width0
     height0
     positionabsolute
     bottom-25px
     left0
     border-left50px solid transparent
     border-right50px solid transparent
     border-top25px solid #000001
   
   
   #Octagon{ 
    width100px
    height100px
    floatleft
    margin10px 10px
    background-color#66e006
    positionrelative
   
   #Octagon:before{ 
    width42px
    height0
    top0
    left0
    positionabsolute
    content""
    border-left29px solid #ffffff
    border-right29px solid #ffffff
    border-bottom29px solid #66e006
   
   #Octagon:after{ 
    width42px
    height0
    left0
    bottom0
    positionabsolute
    content""
    border-left29px solid #ffffff
    border-right29px solid #ffffff
    border-top29px solid #66e006
   
   
   #Heart { 
    floatleft
    positionrelative
   
   #Heart:before, #Heart:after { 
    content""
    width70px
    height115px
    positionabsolute
    backgroundred
    left70px
    top0
    -webkit-border-radius: 50px 50px 0 0
    -moz-border-radius: 50px 50px 0 0
    border-radius: 50px 50px 0 0
    -webkit-transform: rotate(-45deg); 
    -moz-transform: rotate(-45deg); 
    -ms-transform: rotate(-45deg); 
    -o-transform: rotate(-45deg); 
    transform: rotate(-45deg); 
    -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 { 
    left0
    -webkit-transform: rotate(45deg); 
    -moz-transform: rotate(45deg); 
    -ms-transform: rotate(45deg); 
    -o-transform: rotate(45deg); 
    transform: rotate(45deg); 
    -webkit-transform-origin: 100% 100%
    -moz-transform-origin: 100% 100%
    -ms-transform-origin: 100% 100%
    -o-transform-origin: 100% 100%
    transform-origin: 100% 100%
   
   
   #Egg { 
    width100px
    height160px
    floatleft
    background#ffb028
    displayblock
    -webkit-border-radius: 60px 60px 60px 60px 100px 100px 68px 68px
    border-radius: 50% 50% 50% 50% 60% 60% 40% 40%
   
   
   #Infinity { 
    width220px
    height100px
    floatleft
    positionrelative
   
   #Infinity:before, #Infinity:after { 
    content""
    width60px
    height60px
    positionabsolute
    top0
    left0
    border20px solid #008bb0
    -moz-border-radius: 50px 50px 0
    border-radius: 50px 50px 0 50px
    -webkit-transform: rotate(-45deg); 
    -moz-transform: rotate(-45deg); 
    -ms-transform: rotate(-45deg); 
    -o-transform: rotate(-45deg); 
    transform: rotate(-45deg); 
   
   #Infinity:after { 
    leftauto
    right0
    -moz-border-radius: 50px 50px 50px 0
    border-radius: 50px 50px 50px 0
    -webkit-transform: rotate(45deg); 
    -moz-transform: rotate(45deg); 
    -ms-transform: rotate(45deg); 
    -o-transform: rotate(45deg); 
    transform: rotate(45deg); 
   
   
   #CommentBubble { 
     width140px
     height100px
     margin30px 20px
     floatleft
     background#8867b9
     positionrelative
     -moz-border-radius: 12px
     -webkit-border-radius: 12px
     border-radius: 12px
   
   #CommentBubble:before { 
     content""
     width0
     height0
     right100%
     top38px
     positionabsolute
     border-top13px solid transparent
     border-right26px solid #8867b9
     border-bottom13px solid transparent
   
   
   #Diamonds{ 
     width50px
     height0
     floatleft
     border-stylesolid
     border-colortransparent transparent #9aff02 transparent
     border-width0 25px 25px 25px
     positionrelative
     margin20px 0 50px 0
   
   #Diamonds:after{ 
     width0
     height0
     top25px
     left-25px
     border-stylesolid
     border-color#9aff02 transparent transparent transparent
     border-width70px 50px 0 50px
     positionabsolute
     content""
    
   
    #EightDiagrams{ 
     width96px
     height48px
     margin20px 20px
     floatleft
     background-color#ffffff
     border-color#000000
     border-stylesolid
     border-width2px 2px 50px 2px
     border-radius: 100%
     positionrelative
    
    #EightDiagrams:before { 
     width12px
     height12px
     top50%
     left0
     content""
     positionabsolute
     background-color#ffffff
     border18px solid #000000
     border-radius: 100%
    
    #EightDiagrams:after { 
     width12px
     height12px
     top50%
     left50%
     background-color#000000
     border18px solid #ffffff
     border-radius:100%
     content""
     positionabsolute
    
   
    #PacMan { 
     width0
     height0
     floatleft
     border-right60px solid transparent
     border-left60px solid #300fed
     border-top60px solid #300fed
     border-bottom60px solid #300fed
     border-top-left-radius: 60px
     border-top-right-radius: 60px
     border-bottom-left-radius: 60px
     border-bottom-right-radius: 60px
    
   
    #Sector { 
      width:0
      height:0
      floatleft
      background-color#ffffff
      border-left70px solid transparent
      border-right70px solid transparent
      border-top100px solid #ab9ed1
      border-radius:50%
    
   
    #CrescentMoon{ 
      width:80px
      height:80px
      floatleft
      background-color#ffffff
      border-radius:50%
      box-shadow: 15px 15px 0 0 #9600d2
    
   
    #TopLeftTriangle { 
      width0px
      height0px
      margin10px 10px
      floatleft
      border-top100px solid #7efde1
      border-right100px solid transparent
    
    #TopRightTriangle { 
      width0px
      height0px
      margin10px 10px
      floatleft
      border-top100px solid #400526
      border-left100px solid transparent
    
    #BottomLeftTriangle { 
     width0px
     height0px
     margin10px 10px
     floatleft
     border-bottom100px solid #600ffe
     border-right100px solid transparent
    
    #BottomRightTriangle { 
     width0px
     height0px
     margin10px 10px
     floatleft
     border-bottom100px solid #ff7578
     border-left100px solid transparent
    
   
    #Burst8 
     width80px
     height80px
     margin10px 10px
     floatleft
     background-color#cf7668
     positionrelative
     transform:rotate(20deg); 
     -webkit-transform:rotate(20deg); 
     -ms-transform:rotate(20deg); 
     -moz-transform:rotate(20deg); 
     -o-transform:rotate(20deg); 
    
    #Burst8:before{ 
     width80px
     height80px
     top0
     left0
     background-color#cf7668
     positionabsolute
     content""
     transform:rotate(135deg); 
     -webkit-transform:rotate(135deg); 
     -ms-transform:rotate(135deg); 
     -moz-transform:rotate(135deg); 
     -o-transform:rotate(135deg); 
    
   
    #Burst12 
      width80px
      height80px
      margin20px 20px
      floatleft
      background-color#a8ff26
      positionrelative
      text-aligncenter
    
    #Burst12:before, #Burst12:after{ 
      width80px
      height80px
      top0
      left0
      background-color#a8ff26
      positionabsolute
      content""
    
    #Burst12:before{ 
      transform:rotate(30deg); 
      -webkit-transform:rotate(30deg); 
      -ms-transform:rotate(30deg); 
      -moz-transform:rotate(30deg); 
      -o-transform:rotate(30deg); 
    
    #Burst12:after{ 
      transform:rotate(60deg); 
      -webkit-transform:rotate(60deg); 
      -ms-transform:rotate(60deg); 
      -moz-transform:rotate(60deg); 
      -o-transform:rotate(60deg); 
    
  </style> 
</head> 
<body> 
  <!-- 圆形:设置宽度和高度相等,border-radius属性为宽度或高度的一半 --> 
  <div id="Circle"></div> 
  <!-- 椭圆形:圆形的变体,高度设置为宽度的一半,border-radius属性为高度除以高度一半 --> 
  <div id="Oval"></div> 
  <!-- 三角形:宽度和高度设置为0,border设置左,右边透明,底边可见Solid --> 
  <div id="Triangle"></div> 
  <!-- 倒三角形:宽度和高度设置为0,border设置左,右边透明,顶边可见Solid --> 
  <div id="InvertedTriangle"></div> 
  <!-- 左三角形:宽度和高度设置为0,border设置上,下边透明,右边可见Solid --> 
  <div id="LeftTriangle"></div> 
  <!-- 右三角形:宽度和高度设置为0,border设置上,下边透明,左边可见Solid --> 
  <div id="RightTriangle"></div> 
  <!-- 菱形:使用transform和rotate相结合,使两个正反三角形上下显示 --> 
  <div id="Diamond"></div> 
  <!-- 梯形:三角形的变体,设置左右两条边相等,并且给它设置一个宽度 --> 
  <div id="Trapezium"></div> 
  <!-- 长方形:宽比高长 --> 
  <div id="Rectangle"></div> 
   
  <!-- 浮动Div换行 --> 
  <div style="clear:both"
  <!-- 正方形:宽和高相等 --> 
  <div id="Square"></div> 
  <!-- 圆环:在圆形的基础上设置边界,边界颜色与圆形填充颜色不同 --> 
  <div id="Ring"></div> 
  <!-- 平行四边形:使用transform使长方形倾斜一个角度 --> 
  <div id="Parallelogram"></div> 
  <!-- 五角星:星形的实现方式比较复杂,主要是使用transform属性来旋转不同的边 --> 
  <div id="FiveStar"></div> 
  <!-- 六角星:使用transform属性来旋转不同的边 --> 
  <div id="SixStar"></div> 
  <!-- 五边形:可以采用三角形和梯形组合 --> 
  <div id="Pentagon"></div> 
  <!-- 六边形:在长方形上面和下面各放置一个三角形 --> 
  <div id="Hexagon"></div> 
  <!-- 八边形:在长方形上面和下面各放置一个梯形 --> 
  <div id="Octagon"></div> 
  <!-- 心形:心形的制作是非常复杂的,可以使用伪元素来制作,分别将伪元素旋转不同的角度,并修改transform-origin属性来设置元素的旋转中心点 --> 
  <div id="Heart"></div> 
   
  <!-- 浮动Div换行 --> 
  <div style="clear:both"
  <!-- 蛋形:椭圆形的变体,高度比宽度稍大,设置正确的border-radius属性 --> 
  <div id="Egg"></div> 
  <!-- 无穷符号:通过border属性和设置伪元素的角度来实现 --> 
  <div id="Infinity"></div> 
  <!-- 消息提示框:一个圆角矩形加左边中间的一个小三角形 --> 
  <div id="CommentBubble"></div> 
  <!-- 钻石:上面一个梯形,下面一个三角形组成 --> 
  <div id="Diamonds"></div> 
  <!-- 八卦图:多个圆形的组合--> 
  <div id="EightDiagrams"></div> 
  <!-- 食豆人:设置border和border-top-left-radius,border-bottom-right-radius等属性--> 
  <div id="PacMan"></div> 
  <!-- 扇形:在三角形的基础上,让其中一边成弧形 --> 
  <div id="Sector"></div> 
  <!-- 月牙:由两条弧线组成的,每个弧线可以看成一个圆的一部分弧长,在圆的基础上让圆有一个阴影可以形成一个月牙 --> 
  <div id="CrescentMoon"></div> 
   
  <!-- 浮动Div换行 --> 
  <div style="clear:both"
  <!-- 顶左直角三角形 --> fdxfdsdds  <div id="TopLeftTriangle"></div> 
  <!-- 顶右直角三角形 --> 
  <div id="TopRightTriangle"></div> 
  <!-- 底左直角三角形 --> 
  <div id="BottomLeftTriangle"></div> 
  <!-- 底右直角三角形 --> 
  <div id="BottomRightTriangle"></div> 
  <!-- 八角形 --> 
  <div id="Burst8"></div> 
  <!-- 十二角形 --> 
  <div id="Burst12"></div> 
</body> 
</html> 
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
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
<!DOCTYPE html> 
<html> 
<head> 
  <meta charset="UTF-8"
  <title>CSS3实现基本图形</title> 
  <style> 
   #Circle{ 
     width:100px
     height:100px
     floatleft
     background#6fee1d
     -moz-border-radius: 50px
     -webkit-border-radius: 50px
     border-radius: 50px
   
   #Oval { 
     width200px
     height100px
     floatleft
     background#e9880c
     -webkit-border-radius: 100px 50px
     -moz-border-radius: 100px 50px
     border-radius: 100px 50px
   
   #Triangle { 
     width0
     height0
     floatleft
     border-bottom100px solid #fcf706
     border-left50px solid transparent
     border-right50px solid transparent
   
   #InvertedTriangle { 
     width0
     height0
     floatleft
     border-top100px solid #30a3bf
     border-left50px solid transparent
     border-right50px solid transparent
   
   #LeftTriangle { 
     width0
     height0
     floatleft
     border-top50px solid transparent
     border-right100px solid #466f20
     border-bottom50px solid transparent
   
   #RightTriangle { 
     width0
     height0
     floatleft
     border-top50px solid transparent
     border-left100px solid #800820
     border-bottom50px solid transparent
   
   #Diamond { 
    width100px
    height100px
    floatleft
    background#8e00ff
    /* Rotate */ 
    -webkit-transform: rotate(-45deg); 
    -moz-transform: rotate(-45deg); 
    -ms-transform: rotate(-45deg); 
    -o-transform: rotate(-45deg); 
    transform: rotate(-45deg); 
    /* Rotate Origin */ 
    -webkit-transform-origin: 0 100%
    -moz-transform-origin: 0 100%
    -ms-transform-origin: 0 100%
    -o-transform-origin: 0 100%
    transform-origin: 0 100%
    margin40px 0 10px 240px
   
   #Trapezium { 
    height0
    width100px
    floatleft
    border-bottom100px solid #dc2500
    border-left50px solid transparent
    border-right50px solid transparent
   
   #Rectangle { 
    height50px
    width100px
    floatleft
    background#afe05d
   
   #Square { 
    height100px
    width100px
    floatleft
    background#b02089
   
   #Ring { 
    width100px
    height100px
    floatleft
    background-colorwhite
    border-radius: 80px
    border:5px #ffd700 solid
   
   #Parallelogram { 
    width120px
    height80px
    floatleft
    margin-left10px
    -webkit-transform: skew(30deg); 
    -moz-transform: skew(230deg); 
    -o-transform: skew(30deg); 
    transform: skew(30deg); 
    background-color#2eda01
   
   
   #FiveStar { 
     width0
     height0
     floatleft
     margin20px 20px
     color#ff0012
     positionrelative
     displayblock
     border-right80px solid transparent
     border-bottom60px solid #ff0012
     border-left80px solid transparent
     -moz-transform: rotate(35deg); 
     -webkit-transform: rotate(35deg); 
     -ms-transform: rotate(35deg); 
     -o-transform: rotate(35deg); 
   
   #FiveStar:before { 
     height0
     width0
     content‘‘
     positionabsolute
     displayblock
     top-35px
     left-50px
     border-bottom60px solid #ff0012
     border-left20px solid transparent
     border-right20px solid transparent
     -webkit-transform: rotate(-35deg); 
     -moz-transform: rotate(-35deg); 
     -ms-transform: rotate(-35deg); 
     -o-transform: rotate(-35deg); 
   
   #FiveStar:after { 
     width0
     height0
     content‘‘
     positionabsolute
     displayblock
     top3px
     left-85px
     color#ff0012
     border-right80px solid transparent
     border-bottom60px solid #ff0012
     border-left80px solid transparent
     -webkit-transform: rotate(-70deg); 
     -moz-transform: rotate(-70deg); 
     -ms-transform: rotate(-70deg); 
     -o-transform: rotate(-70deg); 
   
   
   #SixStar{ 
     width0
     height0
     floatleft
     border-left50px solid transparent
     border-right50px solid transparent
     border-bottom100px solid #cfd810
     positionrelative
    
    #SixStar:after{ 
     width0
     height0
     content""
     border-top100px solid #cfd810
     border-left50px solid transparent
     border-right50px solid transparent
     positionabsolute
     top30px
     left-50px
    
   
    #Pentagon{ 
      width60px
      floatleft
      positionrelative
      border-width52px 20px 0
      border-stylesolid
      border-color#711ee2 transparent
    
    #Pentagon:before{ 
      content""
      positionabsolute
      width0
      height0
      top-92px
      left-20px
      border-width0 50px 40px
      border-stylesolid
      border-colortransparent transparent #711ee2
    
   
    #Hexagon { 
      width100px
      height55px
      floatleft
      background#000001
      positionrelative
      margin10px auto
    
    #Hexagon:before { 
      content""
      width0
      height0
      positionabsolute
      top-25px
      left0
      border-left50px solid transparent
      border-right50px solid transparent
      border-bottom25px solid #000001
   
   #Hexagon:after { 
     content""
     width0
     height0
     positionabsolute
     bottom-25px
     left0
     border-left50px solid transparent
     border-right50px solid transparent
     border-top25px solid #000001
   
   
   #Octagon{ 
    width100px
    height100px
    floatleft
    margin10px 10px
    background-color#66e006
    positionrelative
   
   #Octagon:before{ 
    width42px
    height0
    top0
    left0
    positionabsolute
    content""
    border-left29px solid #ffffff
    border-right29px solid #ffffff
    border-bottom29px solid #66e006
   
   #Octagon:after{ 
    width42px
    height0
    left0
    bottom0
    positionabsolute
    content""
    border-left29px solid #ffffff
    border-right29px solid #ffffff
    border-top29px solid #66e006
   
   
   #Heart { 
    floatleft
    positionrelative
   
   #Heart:before, #Heart:after { 
    content""
    width70px
    height115px
    positionabsolute
    backgroundred
    left70px
    top0
    -webkit-border-radius: 50px 50px 0 0
    -moz-border-radius: 50px 50px 0 0
    border-radius: 50px 50px 0 0
    -webkit-transform: rotate(-45deg); 
    -moz-transform: rotate(-45deg); 
    -ms-transform: rotate(-45deg); 
    -o-transform: rotate(-45deg); 
    transform: rotate(-45deg); 
    -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 { 
    left0
    -webkit-transform: rotate(45deg); 
    -moz-transform: rotate(45deg); 
    -ms-transform: rotate(45deg); 
    -o-transform: rotate(45deg); 
    transform: rotate(45deg); 
    -webkit-transform-origin: 100% 100%
    -moz-transform-origin: 100% 100%
    -ms-transform-origin: 100% 100%
    -o-transform-origin: 100% 100%
    transform-origin: 100% 100%
   
   
   #Egg { 
    width100px
    height160px
    floatleft
    background#ffb028
    displayblock
    -webkit-border-radius: 60px 60px 60px 60px 100px 100px 68px 68px
    border-radius: 50% 50% 50% 50% 60% 60% 40% 40%
   
   
   #Infinity { 
    width220px
    height100px
    floatleft
    positionrelative
   
   #Infinity:before, #Infinity:after { 
    content""
    width60px
    height60px
    positionabsolute
    top0
    left0
    border20px solid #008bb0
    -moz-border-radius: 50px 50px 0
    border-radius: 50px 50px 0 50px
    -webkit-transform: rotate(-45deg); 
    -moz-transform: rotate(-45deg); 
    -ms-transform: rotate(-45deg); 
    -o-transform: rotate(-45deg); 
    transform: rotate(-45deg); 
   
   #Infinity:after { 
    leftauto
    right0
    -moz-border-radius: 50px 50px 50px 0
    border-radius: 50px 50px 50px 0
    -webkit-transform: rotate(45deg); 
    -moz-transform: rotate(45deg); 
    -ms-transform: rotate(45deg); 
    -o-transform: rotate(45deg); 
    transform: rotate(45deg); 
   
   
   #CommentBubble { 
     width140px
     height100px
     margin30px 20px
     floatleft
     background#8867b9
     positionrelative
     -moz-border-radius: 12px
     -webkit-border-radius: 12px
     border-radius: 12px
   
   #CommentBubble:before { 
     content""
     width0
     height0
     right100%
     top38px
     positionabsolute
     border-top13px solid transparent
     border-right26px solid #8867b9
     border-bottom13px solid transparent
   
   
   #Diamonds{ 
     width50px
     height0
     floatleft
     border-stylesolid
     border-colortransparent transparent #9aff02 transparent
     border-width0 25px 25px 25px
     positionrelative
     margin20px 0 50px 0
   
   #Diamonds:after{ 
     width0
     height0
     top25px
     left-25px
     border-stylesolid
     border-color#9aff02 transparent transparent transparent
     border-width70px 50px 0 50px
     positionabsolute
     content""
    
   
    #EightDiagrams{ 
     width96px
     height48px
     margin20px 20px
     floatleft
     background-color#ffffff
     border-color#000000
     border-stylesolid
     border-width2px 2px 50px 2px
     border-radius: 100%
     positionrelative
    
    #EightDiagrams:before { 
     width12px
     height12px
     top50%
     left0
     content""
     positionabsolute
     background-color#ffffff
     border18px solid #000000
     border-radius: 100%
    
    #EightDiagrams:after { 
     width12px
     height12px
     top50%
     left50%
     background-color#000000
     border18px solid #ffffff
     border-radius:100%
     content""
     positionabsolute
    
   
    #PacMan { 
     width0
     height0
     floatleft
     border-right60px solid transparent
     border-left60px solid #300fed
     border-top60px solid #300fed
     border-bottom60px solid #300fed
     border-top-left-radius: 60px
     border-top-right-radius: 60px
     border-bottom-left-radius: 60px
     border-bottom-right-radius: 60px
    
   
    #Sector { 
      width:0
      height:0
      floatleft
      background-color#ffffff
      border-left70px solid transparent
      border-right70px solid transparent
      border-top100px solid #ab9ed1
      border-radius:50%
    
   
    #CrescentMoon{ 
      width:80px
      height:80px
      floatleft
      background-color#ffffff
      border-radius:50%
      box-shadow: 15px 15px 0 0 #9600d2
    
   
    #TopLeftTriangle { 
      width0px
      height0px
      margin10px 10px
      floatleft
      border-top100px solid #7efde1
      border-right100px solid transparent
    
    #TopRightTriangle { 
      width0px
      height0px
      margin10px 10px
      floatleft
      border-top100px solid #400526
      border-left100px solid transparent
    
    #BottomLeftTriangle { 
     width0px
     height0px
     margin10px 10px
     floatleft
     border-bottom100px solid #600ffe
     border-right100px solid transparent
    
    #BottomRightTriangle { 
     width0px
     height0px
     margin10px 10px
     floatleft
     border-bottom100px solid #ff7578
     border-left100px solid transparent
    
   
    #Burst8 
     width80px
     height80px
     margin10px 10px
     floatleft
     background-color#cf7668
     positionrelative
     transform:rotate(20deg); 
     -webkit-transform:rotate(20deg); 
     -ms-transform:rotate(20deg); 
     -moz-transform:rotate(20deg); 
     -o-transform:rotate(20deg); 
    
    #Burst8:before{ 
     width80px
     height80px
     top0
     left0
     background-color#cf7668
     positionabsolute
     content""
     transform:rotate(135deg); 
     -webkit-transform:rotate(135deg); 
     -ms-transform:rotate(135deg); 
     -moz-transform:rotate(135deg); 
     -o-transform:rotate(135deg); 
    
   
    #Burst12 
      width80px
      height80px
      margin20px 20px
      floatleft
      background-color#a8ff26
      positionrelative
      text-aligncenter
    
    #Burst12:before, #Burst12:after{ 
      width80px
      height80px
      top0
      left0
      background-color#a8ff26
      positionabsolute
      content""
    
    #Burst12:before{ 
      transform:rotate(30deg); 
      -webkit-transform:rotate(30deg); 
      -ms-transform:rotate(30deg); 
      -moz-transform:rotate(30deg); 
      -o-transform:rotate(30deg); 
    
    #Burst12:after{ 
      transform:rotate(60deg); 
      -webkit-transform:rotate(60deg); 
      -ms-transform:rotate(60deg); 
      -moz-transform:rotate(60deg); 
      -o-transform:rotate(60deg); 
    
  </style> 
</head> 
<body> 
  <!-- 圆形:设置宽度和高度相等,border-radius属性为宽度或高度的一半 --> 
  <div id="Circle"></div> 
  <!-- 椭圆形:圆形的变体,高度设置为宽度的一半,border-radius属性为高度除以高度一半 --> 
  <div id="Oval"></div> 
  <!-- 三角形:宽度和高度设置为0,border设置左,右边透明,底边可见Solid --> 
  <div id="Triangle"></div> 
  <!-- 倒三角形:宽度和高度设置为0,border设置左,右边透明,顶边可见Solid --> 
  <div id="InvertedTriangle"></div> 
  <!-- 左三角形:宽度和高度设置为0,border设置上,下边透明,右边可见Solid --> 
  <div id="LeftTriangle"></div> 
  <!-- 右三角形:宽度和高度设置为0,border设置上,下边透明,左边可见Solid --> 
  <div id="RightTriangle"></div> 
  <!-- 菱形:使用transform和rotate相结合,使两个正反三角形上下显示 --> 
  <div id="Diamond"></div> 
  <!-- 梯形:三角形的变体,设置左右两条边相等,并且给它设置一个宽度 --> 
  <div id="Trapezium"></div> 
  <!-- 长方形:宽比高长 --> 
  <div id="Rectangle"></div> 
   
  <!-- 浮动Div换行 --> 
  <div style="clear:both"
  <!-- 正方形:宽和高相等 --> 
  <div id="Square"></div> 
  <!-- 圆环:在圆形的基础上设置边界,边界颜色与圆形填充颜色不同 --> 
  <div id="Ring"></div> 
  <!-- 平行四边形:使用transform使长方形倾斜一个角度 --> 
  <div id="Parallelogram"></div> 
  <!-- 五角星:星形的实现方式比较复杂,主要是使用transform属性来旋转不同的边 --> 
  <div id="FiveStar"></div> 
  <!-- 六角星:使用transform属性来旋转不同的边 --> 
  <div id="SixStar"></div> 
  <!-- 五边形:可以采用三角形和梯形组合 --> 
  <div id="Pentagon"></div> 
  <!-- 六边形:在长方形上面和下面各放置一个三角形 --> 
  <div id="Hexagon"></div> 
  <!-- 八边形:在长方形上面和下面各放置一个梯形 --> 
  <div id="Octagon"></div> 
  <!-- 心形:心形的制作是非常复杂的,可以使用伪元素来制作,分别将伪元素旋转不同的角度,并修改transform-origin属性来设置元素的旋转中心点 --> 
  <div id="Heart"></div> 
   
  <!-- 浮动Div换行 --> 
  <div style="clear:both"
  <!-- 蛋形:椭圆形的变体,高度比宽度稍大,设置正确的border-radius属性 --> 
  <div id="Egg"></div> 
  <!-- 无穷符号:通过border属性和设置伪元素的角度来实现 --> 
  <div id="Infinity"></div> 
  <!-- 消息提示框:一个圆角矩形加左边中间的一个小三角形 --> 
  <div id="CommentBubble"></div> 
  <!-- 钻石:上面一个梯形,下面一个三角形组成 --> 
  <div id="Diamonds"></div> 
  <!-- 八卦图:多个圆形的组合--> 
  <div id="EightDiagrams"></div> 
  <!-- 食豆人:设置border和border-top-left-radius,border-bottom-right-radius等属性--> 
  <div id="PacMan"></div> 
  <!-- 扇形:在三角形的基础上,让其中一边成弧形 --> 
  <div id="Sector"></div> 
  <!-- 月牙:由两条弧线组成的,每个弧线可以看成一个圆的一部分弧长,在圆的基础上让圆有一个阴影可以形成一个月牙 --> 
  <div id="CrescentMoon"></div> 
   
  <!-- 浮动Div换行 --> 
  <div style="clear:both"
  <!-- 顶左直角三角形 --> 
  <div id="TopLeftTriangle"></div> 
  <!-- 顶右直角三角形 --> 
  <div id="TopRightTriangle"></div> 
  <!-- 底左直角三角形 --> 
  <div id="BottomLeftTriangle"></div> 
  <!-- 底右直角三角形 --> 
  <div id="BottomRightTriangle"></div> 
  <!-- 八角形 --> 
  <div id="Burst8"></div> 
  <!-- 十二角形 --> 
  <div id="Burst12"></div> 
</body> 
</html> 

各种纯css图标

标签:

原文地址:http://www.cnblogs.com/jc5426226/p/5819667.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!