CSS3实现32种基本图形

最新推荐文章于 2024-06-18 10:00:00 发布
最新推荐文章于 2024-06-18 10:00:00 发布
阅读量1w 收藏 32
点赞数 6
分类专栏： CSS3 文章标签： css3 图形

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

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

      参考文章：http://blog.csdn.net/chenhongwu666/article/details/38905803

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

     效果图：

                    

[css]  view plain  copy
 print ? 在CODE上查看代码片 派生到我的代码片
  1. #Circle{  
  2.   width:100px;  
  3.   height:100px;  
  4.   float: left;  
  5.   background: #6fee1d;  
  6.   -moz-border-radius: 50px;  
  7.   -webkit-border-radius: 50px;  
  8.   border-radius: 50px;  
  9. }  

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

    效果图：

                 

[css]  view plain  copy
 print ? 在CODE上查看代码片 派生到我的代码片
  1. #Oval {  
  2.    width: 200px;  
  3.    height: 100px;  
  4.    float: left;  
  5.    background: #e9880c;  
  6.    -webkit-border-radius: 100px / 50px;  
  7.    -moz-border-radius: 100px / 50px;  
  8.    border-radius: 100px / 50px;  
  9.  }  

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

    效果图：

                 

[css]  view plain  copy
 print ? 在CODE上查看代码片 派生到我的代码片
  1. #Triangle {  
  2.    width: 0;  
  3.    height: 0;  
  4.    float: left;  
  5.    border-bottom: 100px solid #fcf706;  
  6.    border-left: 50px solid transparent;  
  7.    border-right: 50px solid transparent;  
  8.  }  

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

    效果图：

             

[css]  view plain  copy
 print ? 在CODE上查看代码片 派生到我的代码片
  1. #InvertedTriangle {  
  2.    width: 0;  
  3.    height: 0;  
  4.    float: left;  
  5.    border-top: 100px solid #30a3bf;  
  6.    border-left: 50px solid transparent;  
  7.    border-right: 50px solid transparent;  
  8.  }  

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

    效果图：

              

[css]  view plain  copy
 print ? 在CODE上查看代码片 派生到我的代码片
  1. #LeftTriangle {  
  2.   width: 0;  
  3.   height: 0;  
  4.   float: left;  
  5.   border-top: 50px solid transparent;  
  6.   border-right: 100px solid #466f20;  
  7.   border-bottom: 50px solid transparent;  
  8. }  

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

      效果图：

              

[css]  view plain  copy
 print ? 在CODE上查看代码片 派生到我的代码片
  1. #RightTriangle {  
  2.    width: 0;  
  3.    height: 0;  
  4.    float: left;  
  5.    border-top: 50px solid transparent;  
  6.    border-left: 100px solid #800820;  
  7.    border-bottom: 50px solid transparent;  
  8.  }  

     7.菱形：使用transform和rotate相结合，使两个正反三角形上下显示。

     效果图：

           

[css]  view plain  copy
 print ? 在CODE上查看代码片 派生到我的代码片
  1. #Diamond {  
  2.   width: 100px;  
  3.   height: 100px;  
  4.   float: left;  
  5.   background: #8e00ff;  
  6.   /* Rotate */  
  7.   -webkit-transform: rotate(-45deg);  
  8.   -moz-transform: rotate(-45deg);  
  9.   -ms-transform: rotate(-45deg);  
  10.   -o-transform: rotate(-45deg);  
  11.   transform: rotate(-45deg);  
  12.   /* Rotate Origin */  
  13.   -webkit-transform-origin: 0 100%;  
  14.   -moz-transform-origin: 0 100%;  
  15.   -ms-transform-origin: 0 100%;  
  16.   -o-transform-origin: 0 100%;  
  17.   transform-origin: 0 100%;  
  18.   margin: 40px 0 10px 240px;  
  19.  }  

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

    效果图：

              

[css]  view plain  copy
 print ? 在CODE上查看代码片 派生到我的代码片
  1. #Trapezium {  
  2.  height: 0;  
  3.  width: 100px;  
  4.  float: left;  
  5.  border-bottom: 100px solid #dc2500;  
  6.  border-left: 50px solid transparent;  
  7.  border-right: 50px solid transparent;  
  8. }  

      9.长方形：宽比高长。

     效果图：

        

[css]  view plain  copy
 print ? 在CODE上查看代码片 派生到我的代码片
  1. #Rectangle {  
  2.  height: 50px;  
  3.  width: 100px;  
  4.  float: left;  
  5.  background: #afe05d;  
  6. }  

     10.正方形：宽和高相等。

    效果图：

            

[css]  view plain  copy
 print ? 在CODE上查看代码片 派生到我的代码片
  1. #Square {  
  2.  height: 100px;  
  3.  width: 100px;  
  4.  float: left;  
  5.  background: #b02089;  
  6. }  

      11.圆环：在圆形的基础上设置边界，边界颜色与圆形填充颜色不同。

      效果图：

          

[css]  view plain  copy
 print ? 在CODE上查看代码片 派生到我的代码片
  1. #Ring {  
  2.  width: 100px;  
  3.  height: 100px;  
  4.  float: left;  
  5.  background-color: white;  
  6.  border-radius: 80px;  
  7.  border:5px #ffd700 solid;  
  8. }  

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

     效果图：

             

[css]  view plain  copy
 print ? 在CODE上查看代码片 派生到我的代码片
  1. #Parallelogram {  
  2.  width: 120px;  
  3.  height: 80px;  
  4.  float: left;  
  5.  margin-left: 10px;  
  6.  -webkit-transform: skew(30deg);  
  7.  -moz-transform: skew(230deg);  
  8.  -o-transform: skew(30deg);  
  9.  transform: skew(30deg);  
  10.  background-color: #2eda01;  
  11. }  

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

      效果图：

         

[css]  view plain  copy
 print ? 在CODE上查看代码片 派生到我的代码片
  1. #FiveStar {  
  2.    width: 0;  
  3.    height: 0;  
  4.    float: left;  
  5.    margin: 20px 20px;  
  6.    color: #ff0012;  
  7.    position: relative;  
  8.    display: block;  
  9.    border-right: 80px solid transparent;  
  10.    border-bottom: 60px solid #ff0012;  
  11.    border-left: 80px solid transparent;  
  12.    -moz-transform: rotate(35deg);  
  13.    -webkit-transform: rotate(35deg);  
  14.    -ms-transform: rotate(35deg);  
  15.    -o-transform: rotate(35deg);  
  16.  }  
  17.  #FiveStar:before {  
  18.    height: 0;  
  19.    width: 0;  
  20.    content: '';  
  21.    position: absolute;  
  22.    display: block;  
  23.    top: -35px;  
  24.    left: -50px;  
  25.    border-bottom: 60px solid #ff0012;  
  26.    border-left: 20px solid transparent;  
  27.    border-right: 20px solid transparent;  
  28.    -webkit-transform: rotate(-35deg);  
  29.    -moz-transform: rotate(-35deg);  
  30.    -ms-transform: rotate(-35deg);  
  31.    -o-transform: rotate(-35deg);  
  32.  }  
  33.  #FiveStar:after {  
  34.    width: 0;  
  35.    height: 0;  
  36.    content: '';  
  37.    position: absolute;  
  38.    display: block;  
  39.    top: 3px;  
  40.    left: -85px;  
  41.    color: #ff0012;  
  42.    border-right: 80px solid transparent;  
  43.    border-bottom: 60px solid #ff0012;  
  44.    border-left: 80px solid transparent;  
  45.    -webkit-transform: rotate(-70deg);  
  46.    -moz-transform: rotate(-70deg);  
  47.    -ms-transform: rotate(-70deg);  
  48.    -o-transform: rotate(-70deg);  
  49.  }  

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

     效果图：

           

[css]  view plain  copy
 print ? 在CODE上查看代码片 派生到我的代码片
  1. #SixStar{  
  2.   width: 0;  
  3.   height: 0;  
  4.   float: left;  
  5.   border-left: 50px solid transparent;  
  6.   border-right: 50px solid transparent;  
  7.   border-bottom: 100px solid #cfd810;  
  8.   position: relative;  
  9.  }  
  10.  #SixStar:after{  
  11.   width: 0;  
  12.   height: 0;  
  13.   content: "";  
  14.   border-top: 100px solid #cfd810;  
  15.   border-left: 50px solid transparent;  
  16.   border-right: 50px solid transparent;  
  17.   position: absolute;  
  18.   top: 30px;  
  19.   left: -50px;  
  20.  }  

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

       效果图：

                

[css]  view plain  copy
 print ? 在CODE上查看代码片 派生到我的代码片
  1. #Hexagon {  
  2.    width: 100px;  
  3.    height: 55px;  
  4.    float: left;  
  5.    background: #000001;  
  6.    position: relative;  
  7.    margin: 10px auto;  
  8.  }  
  9.  #Hexagon:before {  
  10.    content: "";  
  11.    width: 0;  
  12.    height: 0;  
  13.    position: absolute;  
  14.    top: -25px;  
  15.    left: 0;  
  16.    border-left: 50px solid transparent;  
  17.    border-right: 50px solid transparent;  
  18.    border-bottom: 25px solid #000001;  
  19. }  
  20. #Hexagon:after {  
  21.   content: "";  
  22.   width: 0;  
  23.   height: 0;  
  24.   position: absolute;  
  25.   bottom: -25px;  
  26.   left: 0;  
  27.   border-left: 50px solid transparent;  
  28.   border-right: 50px solid transparent;  
  29.   border-top: 25px solid #000001;  
  30. }  

     16.五边形：可以采用三角形和梯形组合。

       效果图：

               

[css]  view plain  copy
 print ? 在CODE上查看代码片 派生到我的代码片
  1. #Pentagon{  
  2.   width: 60px;  
  3.   float: left;  
  4.   position: relative;  
  5.   border-width: 52px 20px 0;  
  6.   border-style: solid;  
  7.   border-color: #711ee2 transparent;  
  8. }  
  9. #Pentagon:before{  
  10.   content: "";  
  11.   position: absolute;  
  12.   width: 0;  
  13.   height: 0;  
  14.   top: -92px;  
  15.   left: -20px;  
  16.   border-width: 0 50px 40px;  
  17.   border-style: solid;  
  18.   border-color: transparent transparent #711ee2;  
  19. }  

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

    效果图：

           

[css]  view plain  copy
 print ? 在CODE上查看代码片 派生到我的代码片
  1. #Octagon{  
  2.   width: 100px;  
  3.   height: 100px;  
  4.   float: left;  
  5.   margin: 10px 10px;  
  6.   background-color: #66e006;  
  7.   position: relative;  
  8.  }  
  9.  #Octagon:before{  
  10.   width: 42px;  
  11.   height: 0;  
  12.   top: 0;  
  13.   left: 0;  
  14.   position: absolute;  
  15.   content: "";  
  16.   border-left: 29px solid #ffffff;  
  17.   border-right: 29px solid #ffffff;  
  18.   border-bottom: 29px solid #66e006;  
  19.  }  
  20.  #Octagon:after{  
  21.   width: 42px;  
  22.   height: 0;  
  23.   left: 0;  
  24.   bottom: 0;  
  25.   position: absolute;  
  26.   content: "";  
  27.   border-left: 29px solid #ffffff;  
  28.   border-right: 29px solid #ffffff;  
  29.   border-top: 29px solid #66e006;  
  30.  }  

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

     效果图：

        

[css]  view plain  copy
 print ? 在CODE上查看代码片 派生到我的代码片
  1. #Heart {  
  2.   float: left;  
  3.   position: relative;  
  4.  }  
  5.  #Heart:before, #Heart:after {  
  6.   content: "";  
  7.   width: 70px;  
  8.   height: 115px;  
  9.   position: absolute;  
  10.   background: red;  
  11.   left: 70px;  
  12.   top: 0;  
  13.   -webkit-border-radius: 50px 50px 0 0;  
  14.   -moz-border-radius: 50px 50px 0 0;  
  15.   border-radius: 50px 50px 0 0;  
  16.   -webkit-transform: rotate(-45deg);  
  17.   -moz-transform: rotate(-45deg);  
  18.   -ms-transform: rotate(-45deg);  
  19.   -o-transform: rotate(-45deg);  
  20.   transform: rotate(-45deg);  
  21.   -webkit-transform-origin: 0 100%;  
  22.   -moz-transform-origin: 0 100%;  
  23.   -ms-transform-origin: 0 100%;  
  24.   -o-transform-origin: 0 100%;  
  25.   transform-origin: 0 100%;  
  26. }  
  27. #Heart:after {  
  28.   left: 0;  
  29.   -webkit-transform: rotate(45deg);  
  30.   -moz-transform: rotate(45deg);  
  31.   -ms-transform: rotate(45deg);  
  32.   -o-transform: rotate(45deg);  
  33.   transform: rotate(45deg);  
  34.   -webkit-transform-origin: 100% 100%;  
  35.   -moz-transform-origin: 100% 100%;  
  36.   -ms-transform-origin: 100% 100%;  
  37.   -o-transform-origin: 100% 100%;  
  38.   transform-origin: 100% 100%;  
  39.  }  

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

     效果图：

          

[css]  view plain  copy
 print ? 在CODE上查看代码片 派生到我的代码片
  1. #Egg {  
  2.   width: 100px;  
  3.   height: 160px;  
  4.   float: left;  
  5.   background: #ffb028;  
  6.   display: block;  
  7.   -webkit-border-radius: 60px 60px 60px 60px / 100px 100px 68px 68px;  
  8.   border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;  
  9.  }  

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

     效果图：

             

[css]  view plain  copy
 print ? 在CODE上查看代码片 派生到我的代码片
  1. #Infinity {  
  2.   width: 220px;  
  3.   height: 100px;  
  4.   float: left;  
  5.   position: relative;  
  6.  }  
  7.  #Infinity:before, #Infinity:after {  
  8.   content: "";  
  9.   width: 60px;  
  10.   height: 60px;  
  11.   position: absolute;  
  12.   top: 0;  
  13.   left: 0;  
  14.   border: 20px solid #008bb0;  
  15.   -moz-border-radius: 50px 50px 0;  
  16.   border-radius: 50px 50px 0 50px;  
  17.   -webkit-transform: rotate(-45deg);  
  18.   -moz-transform: rotate(-45deg);  
  19.   -ms-transform: rotate(-45deg);  
  20.   -o-transform: rotate(-45deg);  
  21.   transform: rotate(-45deg);  
  22.  }  
  23.  #Infinity:after {  
  24.   left: auto;  
  25.   right: 0;  
  26.   -moz-border-radius: 50px 50px 50px 0;  
  27.   border-radius: 50px 50px 50px 0;  
  28.   -webkit-transform: rotate(45deg);  
  29.   -moz-transform: rotate(45deg);  
  30.   -ms-transform: rotate(45deg);  
  31.   -o-transform: rotate(45deg);  
  32.   transform: rotate(45deg);  
  33.  }  
      21.消息提示框：一个圆角矩形加左边中间的一个小三角形。

     效果图：

           

[css]  view plain  copy
 print ? 在CODE上查看代码片 派生到我的代码片
  1. #CommentBubble {  
  2.    width: 140px;  
  3.    height: 100px;  
  4.    margin: 30px 20px;  
  5.    float: left;  
  6.    background: #8867b9;  
  7.    position: relative;  
  8.    -moz-border-radius: 12px;  
  9.    -webkit-border-radius: 12px;  
  10.    border-radius: 12px;  
  11.  }  
  12.  #CommentBubble:before {  
  13.    content: "";  
  14.    width: 0;  
  15.    height: 0;  
  16.    right: 100%;  
  17.    top: 38px;  
  18.    position: absolute;  
  19.    border-top: 13px solid transparent;  
  20.    border-right: 26px solid #8867b9;  
  21.    border-bottom: 13px solid transparent;  
  22.  }  
      22.钻石：上面一个梯形，下面一个三角形组成。

      效果图：

             

[css]  view plain  copy
 print ? 在CODE上查看代码片 派生到我的代码片
  1. #Diamonds{  
  2.   width: 50px;  
  3.   height: 0;  
  4.   float: left;  
  5.   border-style: solid;  
  6.   border-color: transparent transparent #9aff02 transparent;  
  7.   border-width: 0 25px 25px 25px;  
  8.   position: relative;  
  9.   margin: 20px 0 50px 0;  
  10. }  
  11. #Diamonds:after{  
  12.   width: 0;  
  13.   height: 0;  
  14.   top: 25px;  
  15.   left: -25px;  
  16.   border-style: solid;  
  17.   border-color: #9aff02 transparent transparent transparent;  
  18.   border-width: 70px 50px 0 50px;  
  19.   position: absolute;  
  20.   content: "";  
  21.  }  
       23.八卦图：多个圆形的组合。

       效果图：

          

[css]  view plain  copy
 print ? 在CODE上查看代码片 派生到我的代码片
  1. #EightDiagrams{  
  2.   width: 96px;  
  3.   height: 48px;  
  4.   margin: 20px 20px;  
  5.   float: left;  
  6.   background-color: #ffffff;  
  7.   border-color: #000000;  
  8.   border-style: solid;  
  9.   border-width: 2px 2px 50px 2px;  
  10.   border-radius: 100%;  
  11.   position: relative;  
  12.  }  
  13.  #EightDiagrams:before {  
  14.   width: 12px;  
  15.   height: 12px;  
  16.   top: 50%;  
  17.   left: 0;  
  18.   content: "";  
  19.   position: absolute;  
  20.   background-color: #ffffff;  
  21.   border: 18px solid #000000;  
  22.   border-radius: 100%;  
  23.  }  
  24.  #EightDiagrams:after {  
  25.   width: 12px;  
  26.   height: 12px;  
  27.   top: 50%;  
  28.   left: 50%;  
  29.   background-color: #000000;  
  30.   border: 18px solid #ffffff;  
  31.   border-radius:100%;  
  32.   content: "";  
  33.   position: absolute;  
  34.  }  
        24.食豆人：设置border和border-top-left-radius，border-bottom-right-radius等属性。

       效果图：

        

[css]  view plain  copy
 print ? 在CODE上查看代码片 派生到我的代码片
  1. #PacMan {  
  2.  width: 0;  
  3.  height: 0;  
  4.  float: left;  
  5.  border-right: 60px solid transparent;  
  6.  border-left: 60px solid #300fed;  
  7.  border-top: 60px solid #300fed;  
  8.  border-bottom: 60px solid #300fed;  
  9.  border-top-left-radius: 60px;  
  10.  border-top-right-radius: 60px;  
  11.  border-bottom-left-radius: 60px;  
  12.  border-bottom-right-radius: 60px;  
  13. }  
       25.扇形：在三角形的基础上，让其中一边成弧形 。

       效果图：

          

[css]  view plain  copy
 print ? 在CODE上查看代码片 派生到我的代码片
  1. #Sector {  
  2.    width:0;  
  3.    height:0;  
  4.    float: left;  
  5.    background-color: #ffffff;  
  6.    border-left: 70px solid transparent;  
  7.    border-right: 70px solid transparent;  
  8.    border-top: 100px solid #ab9ed1;  
  9.    border-radius:50%;  
  10.  }  
       26.月牙：由两条弧线组成的，每个弧线可以看成一个圆的一部分弧长，在圆的基础上让圆有一个阴影可以形成一个月牙。

        效果图：

            

[css]  view plain  copy
 print ? 在CODE上查看代码片 派生到我的代码片
  1. #CrescentMoon{  
  2.    width:80px;  
  3.    height:80px;  
  4.    float: left;  
  5.    background-color: #ffffff;  
  6.    border-radius:50%;  
  7.    box-shadow: 15px 15px 0 0 #9600d2;  
  8.  }  
       27.顶左直角三角形。

       效果图：

          

[css]  view plain  copy
 print ? 在CODE上查看代码片 派生到我的代码片
  1. #TopLeftTriangle {  
  2.    width: 0px;  
  3.    height: 0px;  
  4.    margin: 10px 10px;  
  5.    float: left;  
  6.    border-top: 100px solid #7efde1;  
  7.    border-right: 100px solid transparent;  
  8.  }  
        28.顶右直角三角形。

         效果图：

              

[css]  view plain  copy
 print ? 在CODE上查看代码片 派生到我的代码片
  1. #TopRightTriangle {  
  2.   width: 0px;  
  3.   height: 0px;  
  4.   margin: 10px 10px;  
  5.   float: left;  
  6.   border-top: 100px solid #400526;  
  7.   border-left: 100px solid transparent;  
  8. }  
       29.底左直角三角形。

        效果图：

              

[css]  view plain  copy
 print ? 在CODE上查看代码片 派生到我的代码片
  1. #BottomLeftTriangle {  
  2.   width: 0px;  
  3.   height: 0px;  
  4.   margin: 10px 10px;  
  5.   float: left;  
  6.   border-bottom: 100px solid #600ffe;  
  7.   border-right: 100px solid transparent;  
  8.  }  
      30.底右直角三角形。

        效果图：

              

[css]  view plain  copy
 print ? 在CODE上查看代码片 派生到我的代码片
  1. #BottomRightTriangle {  
  2.   width: 0px;  
  3.   height: 0px;  
  4.   margin: 10px 10px;  
  5.   float: left;  
  6.   border-bottom: 100px solid #ff7578;  
  7.   border-left: 100px solid transparent;  
  8.  }  
       31.八角形。

        效果图：

                  

[css]  view plain  copy
 print ? 在CODE上查看代码片 派生到我的代码片
  1. #Burst8 {  
  2.  width: 80px;  
  3.  height: 80px;  
  4.  margin: 10px 10px;  
  5.  float: left;  
  6.  background-color: #cf7668;  
  7.  position: relative;  
  8.  transform:rotate(20deg);  
  9.  -webkit-transform:rotate(20deg);  
  10.  -ms-transform:rotate(20deg);  
  11.  -moz-transform:rotate(20deg);  
  12.  -o-transform:rotate(20deg);  
  13. }  
  14. #Burst8:before{  
  15.  width: 80px;  
  16.  height: 80px;  
  17.  top: 0;  
  18.  left: 0;  
  19.  background-color: #cf7668;  
  20.  position: absolute;  
  21.  content: "";  
  22.  transform:rotate(135deg);  
  23.  -webkit-transform:rotate(135deg);  
  24.  -ms-transform:rotate(135deg);  
  25.  -moz-transform:rotate(135deg);  
  26.  -o-transform:rotate(135deg);  
  27. }  
      32.十二角形。

          效果图：

             

[css]  view plain  copy
 print ? 在CODE上查看代码片 派生到我的代码片
  1. #Burst12 {  
  2.    width: 80px;  
  3.    height: 80px;  
  4.    margin: 20px 20px;  
  5.    float: left;  
  6.    background-color: #a8ff26;  
  7.    position: relative;  
  8.    text-align: center;  
  9.  }  
  10.  #Burst12:before, #Burst12:after{  
  11.    width: 80px;  
  12.    height: 80px;  
  13.    top: 0;  
  14.    left: 0;  
  15.    background-color: #a8ff26;  
  16.    position: absolute;  
  17.    content: "";  
  18.  }  
  19.  #Burst12:before{  
  20.    transform:rotate(30deg);  
  21.    -webkit-transform:rotate(30deg);  
  22.    -ms-transform:rotate(30deg);  
  23.    -moz-transform:rotate(30deg);  
  24.    -o-transform:rotate(30deg);  
  25.  }  
  26.  #Burst12:after{  
  27.    transform:rotate(60deg);  
  28.    -webkit-transform:rotate(60deg);  
  29.    -ms-transform:rotate(60deg);  
  30.    -moz-transform:rotate(60deg);  
  31.    -o-transform:rotate(60deg);  
  32.  }  
      完整的CSS3+HTML5代码：BaseGraphCSS3.html

      效果图：

       

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

      心形和五角星复杂，但很常用，灵活运用可以使我们的网站更加炫酷。 

      以后如果遇到其他用CSS直接绘制的图形，会收集补充到这。

           

      转自：http://blog.csdn.net/wp1603710463/article/details/51180912

Hello 程序猿
关注
  • 6
    点赞
  • 踩
  • 32
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
CSS3制作各种形状图像
weixin_34124939的博客
11-23 3824
制作圆形： 要使用CSS来制作一个圆形，我们需要一个div，被给它设置一个ID <div id="circle"></div> 圆形在设置CSS时要设置宽度和高度相等，然后设置border-radius属性为宽度或高度的一半即可： #circle { width: 120px; heig...
css3绘制常见的30种形状（心形,五角星,六边形,钻石,对话框,阴阳鱼图等）
boy火巨的博客
03-12 3232
CSS实现圆角，三角，五角星，五边形，爱心，12角星，8角星，圆，椭圆，圆圈，八卦等等 新出的html5新增了不少标签，性能更强，原来的很繁琐的功能几个标签就能实现，同时CSS3也推出，更是一大亮点，下面是css3的部分用法，在此总结一下，以供需要的朋友们，总共30个例子 长方形 #Rectangle{ width: 200px; height: 50px; ...
使用CSS3实现常见图形 【小咚“面筋”记】
咚の窝
11-17 631
文章目录前言一、矩形（正方形）二、菱形三、梯形四、三角形总结 前言 css算是最基础的东西吧，之前也写的挺多的，什么特效动画啥的，但是没有系统的学习，也不经常用，只有用到的时候才会去百度，偏偏面试的时候问我怎么用css画一个三角形，啊这…我这么久都没好好玩css了，上网搜一下到是可以，可惜当时面试完全忘了怎么搞，以前能徒手画爱心，现在呵呵…css3里面好多属性，让网页可以做的更炫酷了，尤其是动画之类的属性，现在也来复盘一下吧，好好的用代码画几个图形，来提升一下自己的css技能，多写就能记下了。 注: 以下
前端面试必学基础！用CSS画7大基本图形
最新发布
Web面试那些事儿的博客
06-18 853
如果你现在正在找工作，可以私信“web”或者直接添加下方小助理进群领取前端面试小册、简历优化修改、大厂内推以及更多阿里、字节大厂面试真题合集，和p8大佬一起交流。
css圆角以及利用css画出一些形状
qq_43209768的博客
08-25 712
来源于技术胖的视频总结 1.圆角border-radius <style> .demo{ width:100px; height: 100px; background:#f0f; margin:50px auto; /* border-top-left-radiu...
纯css3绿色卡通树图形特效
07-24
在描述中提到的"绿色卡通树图形特效"，我们可以理解为一种使用CSS3形状和颜色来模拟卡通风格的绿色树的图形。我们可以使用`border-radius`来创建圆润的树叶形状，用`linear-gradient`来制作从浅绿到深绿的颜色过渡，...
CSS3 画基本图形，圆形、椭圆形、三角形等
09-27
在CSS3中，绘制基本图形是一项非常实用的功能，它允许开发者使用纯CSS创建各种形状，如圆形、椭圆形、三角形、平行四边形、梯形、六角星以及五角星等，无需借助图像编辑软件。下面我们将详细介绍如何利用CSS3实现...
CSS3卡通魔法城堡图形特效
07-24
在本文中，我们将深入探讨如何使用CSS3来创建一个引人入胜的“卡通魔法城堡图形特效”。CSS3，即层叠样式表的第三版，是网页设计领域中用于定义和美化网页内容呈现的重要工具。它引入了许多新的特性和功能，使开发者...
纯CSS3实现几何爱心图形特效源码.zip
11-20
在本资源中，我们主要探讨的是如何利用纯CSS3技术来创建几何爱心图形，并实现一些动态特效。CSS3是 Cascading Style Sheets（层叠样式表）的第三个版本，它为Web开发者提供了更多强大的功能和控制，包括动画、转换、...
CSS3绘制卡通小熊图形特效
07-24
在本文中，我们将深入探讨如何使用CSS3技术来创建一个卡通小熊图形特效。CSS3是层叠样式表（Cascading Style Sheets）的第三版，它为网页设计师提供了更强大的样式控制和丰富的视觉效果。在这个项目中，我们特别关注...
css3实现画半圆弧线的示例代码
09-24
本篇文章主要介绍了css3实现画半圆弧线的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
css-两种画弧线方法
热门推荐
LinBM123的博客
08-18 1万+
css-两种画弧线方法
CSS3绘制不规则图形
a378113472的博客
04-08 2089
由于近期的项目中出现了不规则的边框和图形， 所以只好提前先温习一下，以前收集的一些CSS3绘制的图形。。。样式绘制的图形比图片的性能要好，体验更佳。 废话不多说，我们直接看效果： 1、三角形系列（三角形、倒三角、左三角、右三角、左上三角、右上三角、左下三角、右下三角） 主要用到的是：宽度高度设置为0， border的各个边的设置（各个边的透明或不透明）； .t...
【html5/css3】CSS实现各种图形(常用图形)
Umbrella_Um的博客
05-19 864
1.正方形 { width: 200px; height: 100px; background: red; } 2.长方形 { width: 200px; height: 100px; background: red; } 3.圆 { width:100px; height:100px; background:red; border-radius:50%; /* 水平、垂直半径为宽高的50% */ } 4.椭圆 { .
用css画一个半圆弧（以小程序为例）
qq_52181663的博客
09-28 3806
2、两个参数时，第一个参数代表：左上、右下（主对角线） ，第二个参数代 表：右上、左下（副对角线）3、四个参数时、第一个参数代表：左上 ，第二个参数代表：右上，第三个代表：右下，第四个参数代表左下。3、三个参数时、第一个参数代表：左上 ，第二个参数代表：右上、左下，第三个代表：右下。二、css样式：原理是两个半圆叠在一起，就是一个半圆弧。那么，如何画一个半圆。圆弧的html结构是 两个块级元素嵌套。1、一个参数时，代表四个角都是这个值。
CSS绘制圆弧
dbeidouxingf的博客
05-27 775
这种矩形+弧形的效果中，弧形的效果一般是由一条曲线拉伸出来的，这条曲线往往是属于一个椭圆的，所以可以绘制一个椭圆，截取部分可视区域实现效果。/* 绘制椭圆 :长半轴为容器宽度*2左右,短半轴为容器宽度*1 左右 -- 可以根据需要进行微调*//* top 为 椭圆高度 - arc-continer高度*//* 高度设置为 圆弧形状整体高度 *//* 绘制为椭圆 */
CSS实现圆角，三角，五角星，五边形，爱心，12角星，8角星，圆，椭圆，圆圈，八卦
程序员的良师益友
08-31 843
 http://blog.csdn.net/chenhongwu666/article/details/38905803
Css 实现漂亮弧形
青衫折扇的博客
11-21 3290
在实现页面五花八门的有特色的ui时，我们有时会遇到要用实现一个弧形，而这样的弧形要怎么实现呢？用图片？好像不大现实，因为这样就要无故多加载一张图片了，这里我们来说说怎么用css的after伪类来实现弧形。 先是一写元素，再给这个元素设置样式和伪类样式 <view class="pure_top"></view> 比如说这个pure_top元素(因为这里是小程序所以用的是view，h5也是一样实现的啦)，我设置的样式如下: .pure_top { width: ..
CSS3实战：打造交互式Web应用
第一章概述了CSS3的主要更新，强调现代Web设计的核心理念，并介绍了常用的CSS3特性，帮助读者建立起对新技术的基本认识。第二章重点关注HTML5和JavaScript的应用，展示了如何构建兼容不同浏览器的模板，确保网站的...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值