CSS3 は 32 の基本的な graphics_html/css_WEB-ITnose を実装します

以下に示す 32 種類のグラフィックを集めました。 CSS3 を使用してこれらのグラフィックを直接描画すると、テクスチャを使用するよりも優れたパフォーマンスとエクスペリエンスが得られ、Web ページを美しくするための非常に優れた方法です。 これらの 32 の図形は、円、楕円、三角形、逆三角形、左三角形、右三角形、ひし形、台形、長方形、正方形、リング、平行四辺形、五芒星、六芒星、五角形、六角形、側面の形状、八角形です。 、ハート形、卵形、無限大記号、メッセージプロンプトボックス、ひし形、八卦図、豆食い、扇形、三日月、左上三角形、右上三角形、左下右三角形、右下直角三角形、八角形、十二角形。

Web ページのコード (

) および Div マージンの設定とフローティング (margin: 20px 20px; float) で使用されます。 : 左;

)。

参考記事: プログラミングホーム: 1. Circle: 幅と高さを等しく設定し、border-radius 属性を幅または高さの半分に設定します。 ： エフェクトマップ:

2. 楕円形: 丸いバリアント、高さの半分が幅の半分に設定され、Border-Radius アトリビュートの高さが半分になります。

レンダリング:

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

3. 三角形: 幅と高さが 0 に設定され、境界線が左右に透明に設定され、ソリッドが下部に表示されます。

レンダリング:

幅と高さは 0 に設定され、境界線は左右に透明に設定され、上端に実線が表示されます。

レンダリング:

幅と高さが 0 に設定され、境界線が上部に設定され、下部が透明になり、右側にソリッドが表示されます。

レンダリング:

幅と高さは 0 に設定され、境界線は上部に設定され、下部は透明になり、左側にソリッドが表示されます。

： エフェクトチャート:

7. ダイヤモンド型: 変形と回転を組み合わせて、2 つの正と負の三角形が上下に表示されます。

use using ’ ’s ’ ’s ’ through ’ through ’ through ‐ ‐ ‐ ‐ ‐ 8. 台形: 三角形の変形で、左側と右側を等しく設定し、それに幅を設定します。

レンダリング:

  #Oval {     width: 200px;     height: 100px;     float: left;     background: #e9880c;     -webkit-border-radius: 100px / 50px;     -moz-border-radius: 100px / 50px;     border-radius: 100px / 50px;   }

9. 長方形: 幅が高さよりも長いです。

レンダリング:

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

10. 正方形: 幅と高さが等しい。

レンダリング:

  #InvertedTriangle {     width: 0;     height: 0;     float: left;     border-top: 100px solid #30a3bf;     border-left: 50px solid transparent;     border-right: 50px solid transparent;   }

11. リング: 円に基づいて境界線を設定します。境界線の色は円の塗りつぶしの色とは異なります。

斜めに絡む。

レンダリング:

   #LeftTriangle {     width: 0;     height: 0;     float: left;     border-top: 50px solid transparent;     border-right: 100px solid #466f20;     border-bottom: 50px solid transparent;   }

13. 五芒星: 星の実装はより複雑で、主にtransform属性を使用してさまざまな面を回転させます。 pransform属性で使用して、異なる側面を回転させます。

レンダリング:

  #RightTriangle {     width: 0;     height: 0;     float: left;     border-top: 50px solid transparent;     border-left: 100px solid #800820;     border-bottom: 50px solid transparent;   }

15. 六角形: 長方形の上下に三角形を配置します。

： エフェクトマップ:

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

      效果图：

       

           多角形绘制比较复杂，比如五角星，八角形等。

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

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

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。