文章标题

最新推荐文章于 2022-10-30 12:21:08 发布
最新推荐文章于 2022-10-30 12:21:08 发布
阅读量322 收藏
点赞数
分类专栏： css 文章标签： css3

CSS3实现32种基本图形 

    <div class="article_manage clearfix">
    <div class="article_l">
        <span class="link_categories">
        标签：
          <a href="http://www.csdn.net/tag/CSS3" target="_blank" onclick="_gaq.push(['_trackEvent','function', 'onclick', 'blog_articles_tag']);">CSS3</a><a href="http://www.csdn.net/tag/%e5%9b%be%e5%bd%a2" target="_blank" onclick="_gaq.push(['_trackEvent','function', 'onclick', 'blog_articles_tag']);">图形</a><a href="http://www.csdn.net/tag/%e4%bb%a3%e7%a0%81" target="_blank" onclick="_gaq.push(['_trackEvent','function', 'onclick', 'blog_articles_tag']);">代码</a><a href="http://www.csdn.net/tag/html5" target="_blank" onclick="_gaq.push(['_trackEvent','function', 'onclick', 'blog_articles_tag']);">html5</a><a href="http://www.csdn.net/tag/html" target="_blank" onclick="_gaq.push(['_trackEvent','function', 'onclick', 'blog_articles_tag']);">html</a>
        </span>
    </div>
    <div class="article_r">
        <span class="link_postdate">2016-04-20 09:42</span>
        <span class="link_view" title="阅读次数">2826人阅读</span>
        <span class="link_comments" title="评论次数"> <a href="#comments" onclick="_gaq.push(['_trackEvent','function', 'onclick', 'blog_articles_pinglun'])">评论</a>(0)</span>
        <span class="link_collect tracking-ad" data-mod="popu_171"> <a href="javascript:void(0);" onclick="javascript:collectArticle('CSS3%e5%ae%9e%e7%8e%b032%e7%a7%8d%e5%9f%ba%e6%9c%ac%e5%9b%be%e5%bd%a2','51198065');return false;" title="收藏" target="_blank">收藏</a></span>
         <span class="link_report"> <a href="#report" onclick="javascript:report(51198065,2);return false;" title="举报">举报</a></span>

    </div>
</div>    <style type="text/css">        
        .embody{
            padding:10px 10px 10px;
            margin:0 -20px;
            border-bottom:solid 1px #ededed;                
        }
        .embody_b{
            margin:0 ;
            padding:10px 0;
        }
        .embody .embody_t,.embody .embody_c{
            display: inline-block;
            margin-right:10px;
        }
        .embody_t{
            font-size: 12px;
            color:#999;
        }
        .embody_c{
            font-size: 12px;
        }
        .embody_c img,.embody_c em{
            display: inline-block;
            vertical-align: middle;               
        }
         .embody_c img{               
            width:30px;
            height:30px;
        }
        .embody_c em{
            margin: 0 20px 0 10px;
            color:#333;
            font-style: normal;
        }
</style>
<script type="text/javascript">
    $(function () {
        try
        {
            var lib = eval("("+$("#lib").attr("value")+")");
            var html = "";
            if (lib.err == 0) {
                $.each(lib.data, function (i) {
                    var obj = lib.data[i];
                    //html += '<img src="' + obj.logo + '"/>' + obj.name + "&nbsp;&nbsp;";
                    html += ' <a href="' + obj.url + '" target="_blank">';
                    html += ' <img src="' + obj.logo + '">';
                    html += ' <em><b>' + obj.name + '</b></em>';
                    html += ' </a>';
                });
                if (html != "") {
                    setTimeout(function () {
                        $("#lib").html(html);                      
                        $("#embody").show();
                    }, 100);
                }
            }      
        } catch (err)
        { }

    });
</script>

          CSS3实现32种基本图形

     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 ?
  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. }  
   #Circle{
     width:100px;
     height:100px;
     float: left;
     background: #6fee1d;
     -moz-border-radius: 50px;
     -webkit-border-radius: 50px;
     border-radius: 50px;
   }

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

    效果图：

                 

[css] view plain copy
print ?
  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.  }  
  #Oval {
     width: 200px;
     height: 100px;
     float: left;
     background: #e9880c;
     -webkit-border-radius: 100px / 50px;
     -moz-border-radius: 100px / 50px;
     border-radius: 100px / 50px;
   }

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

    效果图：

                 

[css] view plain copy
print ?
  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.  }  
  #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。

    效果图：

             

[css] view plain copy
print ?
  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.  }  
  #InvertedTriangle {
     width: 0;
     height: 0;
     float: left;
     border-top: 100px solid #30a3bf;
     border-left: 50px solid transparent;
     border-right: 50px solid transparent;
   }

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

    效果图：

              

[css] view plain copy
print ?
  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. }  
   #LeftTriangle {
     width: 0;
     height: 0;
     float: left;
     border-top: 50px solid transparent;
     border-right: 100px solid #466f20;
     border-bottom: 50px solid transparent;
   }

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

      效果图：

              

[css] view plain copy
print ?
  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.  }  
  #RightTriangle {
     width: 0;
     height: 0;
     float: left;
     border-top: 50px solid transparent;
     border-left: 100px solid #800820;
     border-bottom: 50px solid transparent;
   }

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

     效果图：

           

[css] view plain copy
print ?
  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.  }  
  #Diamond {
    width: 100px;
    height: 100px;
    float: left;
    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%;
    margin: 40px 0 10px 240px;
   }

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

    效果图：

              

[css] view plain copy
print ?
  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. }  
   #Trapezium {
    height: 0;
    width: 100px;
    float: left;
    border-bottom: 100px solid #dc2500;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
   }

      9.长方形：宽比高长。

     效果图：

        

[css] view plain copy
print ?
  1. #Rectangle {  
  2.  height: 50px;  
  3.  width: 100px;  
  4.  float: left;  
  5.  background: #afe05d;  
  6. }  
   #Rectangle {
    height: 50px;
    width: 100px;
    float: left;
    background: #afe05d;
   }

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

    效果图：

            

[css] view plain copy
print ?
  1. #Square {  
  2.  height: 100px;  
  3.  width: 100px;  
  4.  float: left;  
  5.  background: #b02089;  
  6. }  
   #Square {
    height: 100px;
    width: 100px;
    float: left;
    background: #b02089;
   }

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

      效果图：

          

[css] view plain copy
print ?
  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. }  
   #Ring {
    width: 100px;
    height: 100px;
    float: left;
    background-color: white;
    border-radius: 80px;
    border:5px #ffd700 solid;
   }

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

     效果图：

             

[css] view plain copy
print ?
  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. }  
   #Parallelogram {
    width: 120px;
    height: 80px;
    float: left;
    margin-left: 10px;
    -webkit-transform: skew(30deg);
    -moz-transform: skew(230deg);
    -o-transform: skew(30deg);
    transform: skew(30deg);
    background-color: #2eda01;
   }

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

      效果图：

         

[css] view plain copy
print ?
  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.  }  
  #FiveStar {
     width: 0;
     height: 0;
     float: left;
     margin: 20px 20px;
     color: #ff0012;
     position: relative;
     display: block;
     border-right: 80px solid transparent;
     border-bottom: 60px solid #ff0012;
     border-left: 80px solid transparent;
     -moz-transform: rotate(35deg);
     -webkit-transform: rotate(35deg);
     -ms-transform: rotate(35deg);
     -o-transform: rotate(35deg);
   }
   #FiveStar:before {
     height: 0;
     width: 0;
     content: '';
     position: absolute;
     display: block;
     top: -35px;
     left: -50px;
     border-bottom: 60px solid #ff0012;
     border-left: 20px solid transparent;
     border-right: 20px solid transparent;
     -webkit-transform: rotate(-35deg);
     -moz-transform: rotate(-35deg);
     -ms-transform: rotate(-35deg);
     -o-transform: rotate(-35deg);
   }
   #FiveStar:after {
     width: 0;
     height: 0;
     content: '';
     position: absolute;
     display: block;
     top: 3px;
     left: -85px;
     color: #ff0012;
     border-right: 80px solid transparent;
     border-bottom: 60px solid #ff0012;
     border-left: 80px solid transparent;
     -webkit-transform: rotate(-70deg);
     -moz-transform: rotate(-70deg);
     -ms-transform: rotate(-70deg);
     -o-transform: rotate(-70deg);
   }

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

     效果图：

           

[css] view plain copy
print ?
  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.  }  
   #SixStar{
     width: 0;
     height: 0;
     float: left;
     border-left: 50px solid transparent;
     border-right: 50px solid transparent;
     border-bottom: 100px solid #cfd810;
     position: relative;
    }
    #SixStar:after{
     width: 0;
     height: 0;
     content: "";
     border-top: 100px solid #cfd810;
     border-left: 50px solid transparent;
     border-right: 50px solid transparent;
     position: absolute;
     top: 30px;
     left: -50px;
    }

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

       效果图：

                

[css] view plain copy
print ?
  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. }  
   #Hexagon {
      width: 100px;
      height: 55px;
      float: left;
      background: #000001;
      position: relative;
      margin: 10px auto;
    }
    #Hexagon:before {
      content: "";
      width: 0;
      height: 0;
      position: absolute;
      top: -25px;
      left: 0;
      border-left: 50px solid transparent;
      border-right: 50px solid transparent;
      border-bottom: 25px solid #000001;
   }
   #Hexagon:after {
     content: "";
     width: 0;
     height: 0;
     position: absolute;
     bottom: -25px;
     left: 0;
     border-left: 50px solid transparent;
     border-right: 50px solid transparent;
     border-top: 25px solid #000001;
   }

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

       效果图：

               

[css] view plain copy
print ?
  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. }  
    #Pentagon{
      width: 60px;
      float: left;
      position: relative;
      border-width: 52px 20px 0;
      border-style: solid;
      border-color: #711ee2 transparent;
    }
    #Pentagon:before{
      content: "";
      position: absolute;
      width: 0;
      height: 0;
      top: -92px;
      left: -20px;
      border-width: 0 50px 40px;
      border-style: solid;
      border-color: transparent transparent #711ee2;
    }

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

    效果图：

           

[css] view plain copy
print ?
  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.  }  
  #Octagon{
    width: 100px;
    height: 100px;
    float: left;
    margin: 10px 10px;
    background-color: #66e006;
    position: relative;
   }
   #Octagon:before{
    width: 42px;
    height: 0;
    top: 0;
    left: 0;
    position: absolute;
    content: "";
    border-left: 29px solid #ffffff;
    border-right: 29px solid #ffffff;
    border-bottom: 29px solid #66e006;
   }
   #Octagon:after{
    width: 42px;
    height: 0;
    left: 0;
    bottom: 0;
    position: absolute;
    content: "";
    border-left: 29px solid #ffffff;
    border-right: 29px solid #ffffff;
    border-top: 29px solid #66e006;
   }

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

     效果图：

        

[css] view plain copy
print ?
  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.  }  
  #Heart {
    float: left;
    position: relative;
   }
   #Heart:before, #Heart:after {
    content: "";
    width: 70px;
    height: 115px;
    position: absolute;
    background: red;
    left: 70px;
    top: 0;
    -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 {
    left: 0;
    -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%;
   }

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

     效果图：

          

[css] view plain copy
print ?
  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.  }  
  #Egg {
    width: 100px;
    height: 160px;
    float: left;
    background: #ffb028;
    display: block;
    -webkit-border-radius: 60px 60px 60px 60px / 100px 100px 68px 68px;
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
   }

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

     效果图：

             

[css] view plain copy
print ?
  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.  }  
  #Infinity {
    width: 220px;
    height: 100px;
    float: left;
    position: relative;
   }
   #Infinity:before, #Infinity:after {
    content: "";
    width: 60px;
    height: 60px;
    position: absolute;
    top: 0;
    left: 0;
    border: 20px 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 {
    left: auto;
    right: 0;
    -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);
   }
      21.消息提示框：一个圆角矩形加左边中间的一个小三角形。

     效果图：

           

[css] view plain copy
print ?
  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.  }  
  #CommentBubble {
     width: 140px;
     height: 100px;
     margin: 30px 20px;
     float: left;
     background: #8867b9;
     position: relative;
     -moz-border-radius: 12px;
     -webkit-border-radius: 12px;
     border-radius: 12px;
   }
   #CommentBubble:before {
     content: "";
     width: 0;
     height: 0;
     right: 100%;
     top: 38px;
     position: absolute;
     border-top: 13px solid transparent;
     border-right: 26px solid #8867b9;
     border-bottom: 13px solid transparent;
   }
      22.钻石：上面一个梯形，下面一个三角形组成。

      效果图：

             

[css] view plain copy
print ?
  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.  }  
   #Diamonds{
     width: 50px;
     height: 0;
     float: left;
     border-style: solid;
     border-color: transparent transparent #9aff02 transparent;
     border-width: 0 25px 25px 25px;
     position: relative;
     margin: 20px 0 50px 0;
   }
   #Diamonds:after{
     width: 0;
     height: 0;
     top: 25px;
     left: -25px;
     border-style: solid;
     border-color: #9aff02 transparent transparent transparent;
     border-width: 70px 50px 0 50px;
     position: absolute;
     content: "";
    }
       23.八卦图：多个圆形的组合。

       效果图：

          

[css] view plain copy
print ?
  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.  }  
   #EightDiagrams{
     width: 96px;
     height: 48px;
     margin: 20px 20px;
     float: left;
     background-color: #ffffff;
     border-color: #000000;
     border-style: solid;
     border-width: 2px 2px 50px 2px;
     border-radius: 100%;
     position: relative;
    }
    #EightDiagrams:before {
     width: 12px;
     height: 12px;
     top: 50%;
     left: 0;
     content: "";
     position: absolute;
     background-color: #ffffff;
     border: 18px solid #000000;
     border-radius: 100%;
    }
    #EightDiagrams:after {
     width: 12px;
     height: 12px;
     top: 50%;
     left: 50%;
     background-color: #000000;
     border: 18px solid #ffffff;
     border-radius:100%;
     content: "";
     position: absolute;
    }
        24.食豆人：设置border和border-top-left-radius，border-bottom-right-radius等属性。

       效果图：

        

[css] view plain copy
print ?
  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. }  
    #PacMan {
     width: 0;
     height: 0;
     float: left;
     border-right: 60px solid transparent;
     border-left: 60px solid #300fed;
     border-top: 60px solid #300fed;
     border-bottom: 60px solid #300fed;
     border-top-left-radius: 60px;
     border-top-right-radius: 60px;
     border-bottom-left-radius: 60px;
     border-bottom-right-radius: 60px;
    }
       25.扇形：在三角形的基础上，让其中一边成弧形 。

       效果图：

          

[css] view plain copy
print ?
  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.  }  
   #Sector {
      width:0;
      height:0;
      float: left;
      background-color: #ffffff;
      border-left: 70px solid transparent;
      border-right: 70px solid transparent;
      border-top: 100px solid #ab9ed1;
      border-radius:50%;
    }
       26.月牙：由两条弧线组成的，每个弧线可以看成一个圆的一部分弧长，在圆的基础上让圆有一个阴影可以形成一个月牙。

        效果图：

            

[css] view plain copy
print ?
  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.  }  
   #CrescentMoon{
      width:80px;
      height:80px;
      float: left;
      background-color: #ffffff;
      border-radius:50%;
      box-shadow: 15px 15px 0 0 #9600d2;
    }
       27.顶左直角三角形。

       效果图：

          

[css] view plain copy
print ?
  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.  }  
   #TopLeftTriangle {
      width: 0px;
      height: 0px;
      margin: 10px 10px;
      float: left;
      border-top: 100px solid #7efde1;
      border-right: 100px solid transparent;
    }
        28.顶右直角三角形。

         效果图：

              

[css] view plain copy
print ?
  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. }  
    #TopRightTriangle {
      width: 0px;
      height: 0px;
      margin: 10px 10px;
      float: left;
      border-top: 100px solid #400526;
      border-left: 100px solid transparent;
    }
       29.底左直角三角形。

        效果图：

              

[css] view plain copy
print ?
  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.  }  
   #BottomLeftTriangle {
     width: 0px;
     height: 0px;
     margin: 10px 10px;
     float: left;
     border-bottom: 100px solid #600ffe;
     border-right: 100px solid transparent;
    }
      30.底右直角三角形。

        效果图：

              

[css] view plain copy
print ?
  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.  }  
   #BottomRightTriangle {
     width: 0px;
     height: 0px;
     margin: 10px 10px;
     float: left;
     border-bottom: 100px solid #ff7578;
     border-left: 100px solid transparent;
    }
       31.八角形。

        效果图：

                  

[css] view plain copy
print ?
  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. }  
    #Burst8 {
     width: 80px;
     height: 80px;
     margin: 10px 10px;
     float: left;
     background-color: #cf7668;
     position: relative;
     transform:rotate(20deg);
     -webkit-transform:rotate(20deg);
     -ms-transform:rotate(20deg);
     -moz-transform:rotate(20deg);
     -o-transform:rotate(20deg);
    }
    #Burst8:before{
     width: 80px;
     height: 80px;
     top: 0;
     left: 0;
     background-color: #cf7668;
     position: absolute;
     content: "";
     transform:rotate(135deg);
     -webkit-transform:rotate(135deg);
     -ms-transform:rotate(135deg);
     -moz-transform:rotate(135deg);
     -o-transform:rotate(135deg);
    }
      32.十二角形。

          效果图：

             

[css] view plain copy
print ?
  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.  }  
   #Burst12 {
      width: 80px;
      height: 80px;
      margin: 20px 20px;
      float: left;
      background-color: #a8ff26;
      position: relative;
      text-align: center;
    }
    #Burst12:before, #Burst12:after{
      width: 80px;
      height: 80px;
      top: 0;
      left: 0;
      background-color: #a8ff26;
      position: absolute;
      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代码：BaseGraphCSS3.html

      效果图：

       

[html] view plain copy
print ?
  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>  
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>CSS3实现基本图形</title>
  <style>
   #Circle{
     width:100px;
     height:100px;
     float: left;
     background: #6fee1d;
     -moz-border-radius: 50px;
     -webkit-border-radius: 50px;
     border-radius: 50px;
   }
   #Oval {
     width: 200px;
     height: 100px;
     float: left;
     background: #e9880c;
     -webkit-border-radius: 100px / 50px;
     -moz-border-radius: 100px / 50px;
     border-radius: 100px / 50px;
   }
   #Triangle {
     width: 0;
     height: 0;
     float: left;
     border-bottom: 100px solid #fcf706;
     border-left: 50px solid transparent;
     border-right: 50px solid transparent;
   }
   #InvertedTriangle {
     width: 0;
     height: 0;
     float: left;
     border-top: 100px solid #30a3bf;
     border-left: 50px solid transparent;
     border-right: 50px solid transparent;
   }
   #LeftTriangle {
     width: 0;
     height: 0;
     float: left;
     border-top: 50px solid transparent;
     border-right: 100px solid #466f20;
     border-bottom: 50px solid transparent;
   }
   #RightTriangle {
     width: 0;
     height: 0;
     float: left;
     border-top: 50px solid transparent;
     border-left: 100px solid #800820;
     border-bottom: 50px solid transparent;
   }
   #Diamond {
    width: 100px;
    height: 100px;
    float: left;
    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%;
    margin: 40px 0 10px 240px;
   }
   #Trapezium {
    height: 0;
    width: 100px;
    float: left;
    border-bottom: 100px solid #dc2500;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
   }
   #Rectangle {
    height: 50px;
    width: 100px;
    float: left;
    background: #afe05d;
   }
   #Square {
    height: 100px;
    width: 100px;
    float: left;
    background: #b02089;
   }
   #Ring {
    width: 100px;
    height: 100px;
    float: left;
    background-color: white;
    border-radius: 80px;
    border:5px #ffd700 solid;
   }
   #Parallelogram {
    width: 120px;
    height: 80px;
    float: left;
    margin-left: 10px;
    -webkit-transform: skew(30deg);
    -moz-transform: skew(230deg);
    -o-transform: skew(30deg);
    transform: skew(30deg);
    background-color: #2eda01;
   }

   #FiveStar {
     width: 0;
     height: 0;
     float: left;
     margin: 20px 20px;
     color: #ff0012;
     position: relative;
     display: block;
     border-right: 80px solid transparent;
     border-bottom: 60px solid #ff0012;
     border-left: 80px solid transparent;
     -moz-transform: rotate(35deg);
     -webkit-transform: rotate(35deg);
     -ms-transform: rotate(35deg);
     -o-transform: rotate(35deg);
   }
   #FiveStar:before {
     height: 0;
     width: 0;
     content: '';
     position: absolute;
     display: block;
     top: -35px;
     left: -50px;
     border-bottom: 60px solid #ff0012;
     border-left: 20px solid transparent;
     border-right: 20px solid transparent;
     -webkit-transform: rotate(-35deg);
     -moz-transform: rotate(-35deg);
     -ms-transform: rotate(-35deg);
     -o-transform: rotate(-35deg);
   }
   #FiveStar:after {
     width: 0;
     height: 0;
     content: '';
     position: absolute;
     display: block;
     top: 3px;
     left: -85px;
     color: #ff0012;
     border-right: 80px solid transparent;
     border-bottom: 60px solid #ff0012;
     border-left: 80px solid transparent;
     -webkit-transform: rotate(-70deg);
     -moz-transform: rotate(-70deg);
     -ms-transform: rotate(-70deg);
     -o-transform: rotate(-70deg);
   }

   #SixStar{
     width: 0;
     height: 0;
     float: left;
     border-left: 50px solid transparent;
     border-right: 50px solid transparent;
     border-bottom: 100px solid #cfd810;
     position: relative;
    }
    #SixStar:after{
     width: 0;
     height: 0;
     content: "";
     border-top: 100px solid #cfd810;
     border-left: 50px solid transparent;
     border-right: 50px solid transparent;
     position: absolute;
     top: 30px;
     left: -50px;
    }

    #Pentagon{
      width: 60px;
      float: left;
      position: relative;
      border-width: 52px 20px 0;
      border-style: solid;
      border-color: #711ee2 transparent;
    }
    #Pentagon:before{
      content: "";
      position: absolute;
      width: 0;
      height: 0;
      top: -92px;
      left: -20px;
      border-width: 0 50px 40px;
      border-style: solid;
      border-color: transparent transparent #711ee2;
    }

    #Hexagon {
      width: 100px;
      height: 55px;
      float: left;
      background: #000001;
      position: relative;
      margin: 10px auto;
    }
    #Hexagon:before {
      content: "";
      width: 0;
      height: 0;
      position: absolute;
      top: -25px;
      left: 0;
      border-left: 50px solid transparent;
      border-right: 50px solid transparent;
      border-bottom: 25px solid #000001;
   }
   #Hexagon:after {
     content: "";
     width: 0;
     height: 0;
     position: absolute;
     bottom: -25px;
     left: 0;
     border-left: 50px solid transparent;
     border-right: 50px solid transparent;
     border-top: 25px solid #000001;
   }

   #Octagon{
    width: 100px;
    height: 100px;
    float: left;
    margin: 10px 10px;
    background-color: #66e006;
    position: relative;
   }
   #Octagon:before{
    width: 42px;
    height: 0;
    top: 0;
    left: 0;
    position: absolute;
    content: "";
    border-left: 29px solid #ffffff;
    border-right: 29px solid #ffffff;
    border-bottom: 29px solid #66e006;
   }
   #Octagon:after{
    width: 42px;
    height: 0;
    left: 0;
    bottom: 0;
    position: absolute;
    content: "";
    border-left: 29px solid #ffffff;
    border-right: 29px solid #ffffff;
    border-top: 29px solid #66e006;
   }

   #Heart {
    float: left;
    position: relative;
   }
   #Heart:before, #Heart:after {
    content: "";
    width: 70px;
    height: 115px;
    position: absolute;
    background: red;
    left: 70px;
    top: 0;
    -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 {
    left: 0;
    -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 {
    width: 100px;
    height: 160px;
    float: left;
    background: #ffb028;
    display: block;
    -webkit-border-radius: 60px 60px 60px 60px / 100px 100px 68px 68px;
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
   }

   #Infinity {
    width: 220px;
    height: 100px;
    float: left;
    position: relative;
   }
   #Infinity:before, #Infinity:after {
    content: "";
    width: 60px;
    height: 60px;
    position: absolute;
    top: 0;
    left: 0;
    border: 20px 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 {
    left: auto;
    right: 0;
    -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 {
     width: 140px;
     height: 100px;
     margin: 30px 20px;
     float: left;
     background: #8867b9;
     position: relative;
     -moz-border-radius: 12px;
     -webkit-border-radius: 12px;
     border-radius: 12px;
   }
   #CommentBubble:before {
     content: "";
     width: 0;
     height: 0;
     right: 100%;
     top: 38px;
     position: absolute;
     border-top: 13px solid transparent;
     border-right: 26px solid #8867b9;
     border-bottom: 13px solid transparent;
   }

   #Diamonds{
     width: 50px;
     height: 0;
     float: left;
     border-style: solid;
     border-color: transparent transparent #9aff02 transparent;
     border-width: 0 25px 25px 25px;
     position: relative;
     margin: 20px 0 50px 0;
   }
   #Diamonds:after{
     width: 0;
     height: 0;
     top: 25px;
     left: -25px;
     border-style: solid;
     border-color: #9aff02 transparent transparent transparent;
     border-width: 70px 50px 0 50px;
     position: absolute;
     content: "";
    }

    #EightDiagrams{
     width: 96px;
     height: 48px;
     margin: 20px 20px;
     float: left;
     background-color: #ffffff;
     border-color: #000000;
     border-style: solid;
     border-width: 2px 2px 50px 2px;
     border-radius: 100%;
     position: relative;
    }
    #EightDiagrams:before {
     width: 12px;
     height: 12px;
     top: 50%;
     left: 0;
     content: "";
     position: absolute;
     background-color: #ffffff;
     border: 18px solid #000000;
     border-radius: 100%;
    }
    #EightDiagrams:after {
     width: 12px;
     height: 12px;
     top: 50%;
     left: 50%;
     background-color: #000000;
     border: 18px solid #ffffff;
     border-radius:100%;
     content: "";
     position: absolute;
    }

    #PacMan {
     width: 0;
     height: 0;
     float: left;
     border-right: 60px solid transparent;
     border-left: 60px solid #300fed;
     border-top: 60px solid #300fed;
     border-bottom: 60px 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;
      float: left;
      background-color: #ffffff;
      border-left: 70px solid transparent;
      border-right: 70px solid transparent;
      border-top: 100px solid #ab9ed1;
      border-radius:50%;
    }

    #CrescentMoon{
      width:80px;
      height:80px;
      float: left;
      background-color: #ffffff;
      border-radius:50%;
      box-shadow: 15px 15px 0 0 #9600d2;
    }

    #TopLeftTriangle {
      width: 0px;
      height: 0px;
      margin: 10px 10px;
      float: left;
      border-top: 100px solid #7efde1;
      border-right: 100px solid transparent;
    }
    #TopRightTriangle {
      width: 0px;
      height: 0px;
      margin: 10px 10px;
      float: left;
      border-top: 100px solid #400526;
      border-left: 100px solid transparent;
    }
    #BottomLeftTriangle {
     width: 0px;
     height: 0px;
     margin: 10px 10px;
     float: left;
     border-bottom: 100px solid #600ffe;
     border-right: 100px solid transparent;
    }
    #BottomRightTriangle {
     width: 0px;
     height: 0px;
     margin: 10px 10px;
     float: left;
     border-bottom: 100px solid #ff7578;
     border-left: 100px solid transparent;
    }

    #Burst8 {
     width: 80px;
     height: 80px;
     margin: 10px 10px;
     float: left;
     background-color: #cf7668;
     position: relative;
     transform:rotate(20deg);
     -webkit-transform:rotate(20deg);
     -ms-transform:rotate(20deg);
     -moz-transform:rotate(20deg);
     -o-transform:rotate(20deg);
    }
    #Burst8:before{
     width: 80px;
     height: 80px;
     top: 0;
     left: 0;
     background-color: #cf7668;
     position: absolute;
     content: "";
     transform:rotate(135deg);
     -webkit-transform:rotate(135deg);
     -ms-transform:rotate(135deg);
     -moz-transform:rotate(135deg);
     -o-transform:rotate(135deg);
    }

    #Burst12 {
      width: 80px;
      height: 80px;
      margin: 20px 20px;
      float: left;
      background-color: #a8ff26;
      position: relative;
      text-align: center;
    }
    #Burst12:before, #Burst12:after{
      width: 80px;
      height: 80px;
      top: 0;
      left: 0;
      background-color: #a8ff26;
      position: absolute;
      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直接绘制的图形，会收集补充到这。

document.getElementById("bdshell_js").src = "http://bdimg.share.baidu.com/static/js/shell_v2.js?cdnversion=" + Math.ceil(new Date()/3600000) 
    <div id="digg" articleid="51198065">
        <dl id="btnDigg" class="digg digg_enable" onclick="btndigga();">

             <dt>顶</dt>
            <dd>1</dd>
        </dl>


        <dl id="btnBury" class="digg digg_enable" onclick="btnburya();">

              <dt>踩</dt>
            <dd>0</dd>               
        </dl>

    </div>
 <div class="tracking-ad" data-mod="popu_222"><a href="javascript:void(0);" target="_blank">&nbsp;</a>   </div>
<div class="tracking-ad" data-mod="popu_223"> <a href="javascript:void(0);" target="_blank">&nbsp;</a></div>
<script type="text/javascript">
    function btndigga() {
        $(".tracking-ad[data-mod='popu_222'] a").click();
    }
    function btnburya() {
        $(".tracking-ad[data-mod='popu_223'] a").click();
    }
        </script>


Crying_cat
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
python爬虫爬取微信公众号的阅读数、喜爱数、文章标题和链接等信息
weixin_46569877的博客
08-04 9528
python爬取微信公众号
使用POI生成文章标题
Cloud的专栏
09-24 7094
生成文章标题有两种方式，一种是自定义标题，还有一种是使用现有样式来生成，现在网上大部分是第一种方式，但这种方式有很多弊端，我们先来看第一种 第一步，引入依赖 <dependency> <groupId>org.apache.poi</groupId> <artifactId>poi</artifactId> <version>3.9</version> </dependency>
Markdown 跳转到本文章标题
小白学CS
10-30 4682
Markdown 跳转到本文章标题
火车头插件：根据文章标题生成图片；标题生成相关配图
qq_26057339的博客
05-12 1735
本插件可以根据文章标题自动配图；根据文章标题生成一张好看的插图； 插件售价200；不限制ip,不限域名。一次购买终身使用。 没有第三方接口的调用不用担心插件失效。 插件效果： 插件优势： 用户可以自定义文字的颜色 用户可以自定义文字的大小 用户可以自定义图片背景 用户可以自定义图片格式 用户可以自定义图片储存的目录 用户可以自定义图片在文章哪个位置插入 插件分为 火车头插件和服务器接口： 服务器接口负责处理图片和储存图片； 火车头插件处理文章内容 服务器插件有运行环境要求 php 版本低于
RiPro主题文章标题美化教程 WordPress美化教程
03-02
/*文章标题优化*/ .sjblog-avatar {  width: 50px;  float: left; } .sjblog-avatar img {  float: left;  width: 50px;  border-radius: 50%;  margin-right: 20px; } .sjblog-tgroup{ ...
Wordpress自定义函数控制文章标题长度
09-29
主要为大家介绍了Wordpress自定义函数控制文章标题长度,需要的朋友可以参考下
Python3 文章标题关键字提取的例子
01-20
1.读取所有文章标题； 2.用“结巴分词”的工具包进行文章标题的词语分割； 3.用“sklearn”的工具包计算Tf-idf（词频-逆文档率）; 4.得到满足关键词权重阈值的词 结巴分词详见：结巴分词Github sklearn详见：文本...
PHPCMS内容页文章标题添加页码的方法教程
09-29
如何让PHPCMS的内容页标题显示页码呢？让每篇文章的标题都不一样，这样不但提高了网页体验率，同时也可以达到SEO优化的效果，让百度、谷歌等多收录一些。
10w文章标题数据（仅供学习使用）
02-18
本次上传的资料仅供nlp的学习，博主的博客中也将使用到这些数据，进行文章title的一些基本挖掘。希望大家能来博客转转，互相学习、借鉴，并提出宝贵意见。
wordpress文章标题为空时其它内容代替的方法
09-29
本文主要介绍了wordpress文章标题为空时使用其它内容代替的方法，大家参考使用吧
wordpress通过当前文章的ID获取文章标题内容简介的信息
09-29
wordpress通过当前文章的ID获取文章的信息用的极多，在wordpress二次开发中经常会使用到，本文将详细介绍，需要了解的朋友可以参考下
请输入文章标题资源标题
最新发布
04-03
资源描述
javascript + jquery实现定时修改文章标题
10-26
用javascript+jquery写的一个定时器，定时修改文章标题,需要的朋友可以参考下
文章标题生成工具3.0最新版.zip
09-03
软件介绍: 一款自动生成各种抓眼球标题的小工具，可以自动生成标题，对于编辑人员就是一款利器。...现在很多文章为了吸引公众视线，标题写得都比较夸张，想要达到这样的效果，你可以试试这个小工具。
python根据文章标题内容自动生成摘要的实例
09-19
今天小编就为大家分享一篇python根据文章标题内容自动生成摘要的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
文章标题的写作技巧
12-17
这一款整理发布的文章标题的写作技巧，适用于日常学习、参考、借鉴文章标题的写作技巧使用，欢...该文档为文章标题的写作技巧，是一份很不错的参考资料，具有较高参考价值，感兴趣的可以下载看看
申论文章标题命名技巧
08-19
申论文章标题命名技巧
wordpress 改写文章标题
03-20
您可以使用以下代码来改写 WordPress 文章标题： function custom_title( $title ) { $new_title = '新标题'; return $new_title; } add_filter( 'the_title', 'custom_title' ); 将“新标题”替换为您想要的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值