CSS3实现32种基本图形

于 2022-02-23 15:50:53 发布
阅读量639 收藏 2
点赞数 1
分类专栏： css3 文章标签： css3
原文链接：https://blog.csdn.net/wp1603710463/article/details/51180912
版权

     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属性为宽度或高度的一半。

     效果图：

                    

   #Circle{
     width:100px;
     height:100px;
     float: left;
     background: #6fee1d;
     -moz-border-radius: 50px;
     -webkit-border-radius: 50px;
     border-radius: 50px;
   }

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

    效果图：

                 

  #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。

    效果图：

                 

  #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。

    效果图：

             

  #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。

    效果图：

              

   #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。

      效果图：

              

  #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相结合，使两个正反三角形上下显示。

     效果图：

           

  #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.梯形：三角形的变体，设置左右两条边相等，并且给它设置一个宽度。

    效果图：

              

   #Trapezium {
    height: 0;
    width: 100px;
    float: left;
    border-bottom: 100px solid #dc2500;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
   }
      9.长方形：宽比高长。

     效果图：

        

   #Rectangle {
    height: 50px;
    width: 100px;
    float: left;
    background: #afe05d;
   }

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

    效果图：

            

   #Square {
    height: 100px;
    width: 100px;
    float: left;
    background: #b02089;
   }

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

      效果图：

          

   #Ring {
    width: 100px;
    height: 100px;
    float: left;
    background-color: white;
    border-radius: 80px;
    border:5px #ffd700 solid;
   }

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

     效果图：

             

   #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属性来旋转不同的边。

      效果图：

         

  #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属性来旋转不同的边。

     效果图：

           

   #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.六边形：在长方形上面和下面各放置一个三角形。

       效果图：

                

   #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.五边形：可以采用三角形和梯形组合。

       效果图：

               

    #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.八边形：在长方形上面和下面各放置一个梯形。

    效果图：

           

  #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属性来设置元素的旋转中心点。

     效果图：

        

  #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属性。

     效果图：

          

  #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属性和设置伪元素的角度来实现。

     效果图：

             

  #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.消息提示框：一个圆角矩形加左边中间的一个小三角形。

     效果图：

           

  #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.钻石：上面一个梯形，下面一个三角形组成。

      效果图：

             

   #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.八卦图：多个圆形的组合。

       效果图：

          

   #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等属性。

       效果图：

        

    #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.扇形：在三角形的基础上，让其中一边成弧形 。

       效果图：

          

   #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.月牙：由两条弧线组成的，每个弧线可以看成一个圆的一部分弧长，在圆的基础上让圆有一个阴影可以形成一个月牙。

        效果图：

            

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

      27.顶左直角三角形。

       效果图：

          

   #TopLeftTriangle {
      width: 0px;
      height: 0px;
      margin: 10px 10px;
      float: left;
      border-top: 100px solid #7efde1;
      border-right: 100px solid transparent;
    }

       28.顶右直角三角形。

         效果图：

              

    #TopRightTriangle {
      width: 0px;
      height: 0px;
      margin: 10px 10px;
      float: left;
      border-top: 100px solid #400526;
      border-left: 100px solid transparent;
    }

      29.底左直角三角形。

        效果图：

              

   #BottomLeftTriangle {
     width: 0px;
     height: 0px;
     margin: 10px 10px;
     float: left;
     border-bottom: 100px solid #600ffe;
     border-right: 100px solid transparent;
    }

      30.底右直角三角形。

        效果图：

              

   #BottomRightTriangle {
     width: 0px;
     height: 0px;
     margin: 10px 10px;
     float: left;
     border-bottom: 100px solid #ff7578;
     border-left: 100px solid transparent;
    }

      31.八角形。

        效果图：

                  

    #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.十二角形。

          效果图：

             

   #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

      效果图：

       

<!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直接绘制的图形，会收集补充到这。

      最近又搜罗到一些纯CSS3生成的小图标，基本上是一些仿手机App类的小图标。因为定位上用到绝对定位较多，感觉处理起来略麻烦。

      以下是效果图：

           

     使用CSS3制作72个webapp图标：http://www.cnblogs.com/jr1993/p/4671561.html

     源代码在此处：https://github.com/JR93/css3-icon

转载于：https://blog.csdn.net/wp1603710463/article/details/51180912 

liu__software
关注
专栏目录
CSS3绘制的基本图形
小妖666个人笔记
10-12 379
1、正方形 #square { width: 100px; height: 100px; background: #6bbf20; } 2、长方形 #square { width: 200px; height: 100px; background: #6bbf20; } 3、圆形 #square { width: 100px; heigh...
CSS3 画基本图形，圆形、椭圆形、三角形等
09-27
在CSS3中，绘制基本图形是一项非常实用的功能，它允许开发者使用纯CSS创建各种形状，如圆形、椭圆形、三角形、平行四边形、梯形、六角星以及五角星等，无需借助图像编辑软件。下面我们将详细介绍如何利用CSS3实现...
用css3实现各种图标效果（1）
weixin_34050519的博客
05-27 583
公共样式 应该说现在绝大多数公司的项目前端都是一团乱，不仅仅是js写的没有任何框架而言，css同样也是如此，导致项目如果要升级或者说有新的变更维护起来就特别困难。 最近领导决定花大时间整理一下css样式，用他的一句话来说就是为后来者造福。 首先我们在整理样式之前，必须得有一个自己团队的规范。 思考真的很重要，所谓的磨刀不误砍柴工，事实上也就是说你在做任何事情之前都要把大致的流程，大致的思路...
CSS3画各种常见的图形
WL
09-17 1159
利用CSS3我们画各种常见的图形，有时候能够省去我们切图的麻烦。 下面就是我根据穆乙 的思路自己测试的画图的CSS方法，测试环境是chrome浏览器，请在支持CSS3的浏览器中测试。一、正，长方形这种比较容易，设置width height background-color就能实现，其实还有个“歪门邪道”，那就是通过边框实现，如果我们只设置一边的边框就会发现显示的为矩形，如下 width: 1
css3图形
qq_43222753的博客
12-16 178
border-radius以像素为值代表圆的半径。 若选定了某个角并有两个值，则第一个是x轴第二个是y轴，可用于画椭圆。 transform: rotate(45deg) 顺时针旋转45度。 transform:skew(x deg , y deg) x轴倾斜x度，y轴倾斜y度。 ...
css3制作图形
记录本人工作中遇到的问题、经验总结以及分享。
08-13 162
css3制作图形 椭圆 .oval { width: 200px; height: 100px; background: red; border-radius: 100px 50px; } 三角形 1.上三角 .triangle-up { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent;
CSS3实现图形颜色渐变 CSS3实现图形颜色渐变效果网页特效.zip
11-17
在现代网页设计中，CSS3已经成为了不可或缺的一部分，它提供了许多强大的功能，其中之一就是图形颜色渐变效果。本文将深入探讨如何使用CSS3来实现图形的颜色渐变，并结合JavaScript、jQuery以及HTML5来构建出丰富的...
纯CSS3实现几何爱心图形特效源码.zip
最新发布
11-20
在本资源中，我们主要探讨的是如何利用纯CSS3技术来创建几何爱心图形，并实现一些动态特效。CSS3是 Cascading Style Sheets（层叠样式表）的第三个版本，它为Web开发者提供了更多强大的功能和控制，包括动画、转换、...
纯css3实现各种图形样式.zip
07-03
对于形状的创建，CSS3引入了新的几何形状，如`rect()`、`circle()`、`ellipse()`和`polygon()`，可以直接用CSS代码创建基本图形。结合`transform`属性，可以对元素进行旋转、缩放、平移和倾斜，进一步创造出复杂的...
CSS3基本图形
06-15
**CSS3基本图形** 在网页设计中，CSS3（Cascading Style Sheets Level 3）是一种强大的样式表语言，用于定义HTML或XML（包括SVG、MathML等）文档的呈现。CSS3引入了许多新的特性，其中之一就是能够用纯CSS创建各种...
css3绘制各种图形效果
在路上 — on the way
08-03 7198
如何使用CSS来制作图形，比如说圆形，半圆形，三角形等。今天我特意在网上查阅了一下，介绍这样的教程还是蛮多的，因此我也决定整理一份相关教程出来与大家一起分享。   　　如何工作？ 　　很少会有人意识到，当浏览器绘制的border，会有一个角度的问题。我们就是得用这样的一个技巧来制作三角的效果。我们只需要保证一边的边框是有色，其他边框色为透明色，这样我们就很容易制作出三角形，然后改
CSS3画图
刘望的博客
10-27 368
&#13; 众所周知，用CSS3的圆角、转换可以画出各种不同的形状，制作不同的图案，早些前先驱者已画出经典的叮当猫，iphone手机等展示CSS3的强大实力，趁最近有空我也对CSS3进行了一些实践，颇有收获。&#13; 用border边框属性可以画出各种三角形，矩形，用border-radius可以画出何种圆形、扇形、圆弧型，利用内置阴影外置阴影可以有各种投影效果，只要你去尝...
css3图形绘制
weixin_30737363的博客
11-26 132
以下几个例子主要是运用了css3中border、bordr-radius、transform、伪元素等属性来完成的，我们先了解下它们的基本原理。 border：简单的来说border语法主要包含（border-width、border-style、border-color）三个属性。 „ border-top（上边框）：border-width border-...
CSS3特殊图形制作
pnjtvxcp的博客
07-06 608
1、三角形 //html <div class="triangleBox"> <div class="triangle"></div> <div class="triangle1"></div> <div class="triangle2"></div> <div c...
使用CSS3制作各种形状
小白知浅的博客
01-23 743
使用CSS3制作各种形状 CSS3的一个非常酷的特性是允许我们创建各种规则和不规则形状的图形，从而可以减少图片的使用。以前只能在Photoshop等图像编辑软件中制作的复杂图形现在使用CSS3就可以完成了。通过使用新的CSS属性，像transform和border-radius，我们可以创建非常漂亮和复杂的图形效果。 圆形 圆形在设置CSS...
用CSS3绘制图形
aems6644的博客
07-21 133
参考资料：http://blog.csdn.net/fense_520/article/details/37892507 本文非转载，为个人原创，转载请先联系博主，谢谢~ 准备： <!DOCTYPE html> <head> <meta charset="UTF-8"> <title>- UED - </...
CSS3图形绘制
尊哥的博客
09-07 347
直接用CSS3画出这些图形，要比贴图性能更好，体验更加，是一种非常好的网页美观方式。 这里有图形绘制的效果图：BaseGraphCSS3.html，还有图形绘制的源代码：CSS3图形绘制.docx 使用CSS3还可以制作图标，可参考：CSS3制作的72个webapp图标，源代码在此处：https://github.com/JR93/css3-icon...
CSS3绘制各类图形
miniminixu的博客
08-28 934
一、圆形最常用，设置宽=高，border-radius为宽或高的一半即可。.circle{ width:100px; height:100px; border-radius:50%;//或者50px background-color:#000; }二、椭圆宽≠高（相等则为圆形了）border-radius的水平半径为宽的50%，垂直半径为高的50%。.oval{
CSS3实现不规则图形与文本布局
`shape-outside`的值可以是`auto`（保持传统盒模型渲染）、基本图形（如`rectangle`、`inset-rectangle`、`circle`、`ellipse`）或一个图片链接。图片链接方法根据图片的透明度（alpha通道）来确定形状。 `polygon`...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值