ホームページ > 記事 > ウェブフロントエンド > CSS3で六角形を描画する方法について

CSS3で六角形を描画する方法について

不言オリジナル: 2018-06-28 10:14:353536ブラウズ

以下は、CSS3 で六角形を描画する簡単な実装を示しています。内容がとても良かったので、参考としてシェアさせていただきます。

非常に簡単なので、最初に要約しましょう: CSS3 を使用して六角形を描画するには、主に 疑似クラス: before と :after を使用して、ソース要素の前後にさらに 2 つの要素を描画し、 css3のボーダースタイルでは、この2つの要素を三角形にしてソース要素の両端に配置するだけです。

(以前、生物系の会社に勤めていたこともあり、六角形は生体分子や遺伝子などの概念に近いと感じています。インターネットで生体分子や遺伝子などの写真を検索したときも含め、六角形のものが多かったです, そのとき、ページ上で機能ナビゲーションやタグを実行すると、六角形が近くなるように感じます）。

完全なページ効果は次のとおりです: (実際には、複数の六角形がこのように配置されています。もちろん、異なるモジュール機能をよりよく区別できるように、異なる六角形の色を設定することもできます)。

以下に示すように、分析用に別の六角形を提案できます:

分析のアイデアがわかったので、まず三角形の描き方を理解できます。インターネット上には多くの例がありますが、使用済みの子供用の靴はありません。検索する必要はありません。コードと例も以下に示します。

レンダリング:

CSS コード:

.arrow{   
              display: inline-block;   
              width:0px;   
              height: 0px;   
              border-style: solid;   
              border-width: 100px; //与padding、margin属性类似，顺序为上、右、下、左   
              border-color: red blue orange gray;　　//顺序为上、右、下、左}

HTML コード:

<p class="arrow"></p>

上の図で述べたように、border border属性を使用し、不要な色を透明色で塗りつぶすと、三角形の特定の部分を取得できます。コードと画像の効果は次のとおりです。

レンダリング: (左側の三角形が必要なもので、他は透明色に設定されています)

CSS コード:

.arrow{   
              display: inline-block;   
              width:0px;   
              height: 0px;   
              border-bottom: 100px solid transparent;　　//设置透明色   
              border-top: 100px solid transparent;　　　//设置透明色   
              border-right: 100px solid transparent;　　//设置透明色   
              border-left: 100px solid gray;   
          }

HTML コード:

<p class="arrow"></p>

わかりました。三角形の描画方法がわかったので、CSS 疑似クラス :before と :after を使用して、描画したい六角形を完成させることができます。

: before は要素の前にコンテンツを挿入します

: after は要素の後にコンテンツを挿入します

テキストコンテンツを挿入したい場合は、表示する必要があるコンテンツを入力できますcontent 属性には、content: "HELLO WORLD" などのテキストが含まれていますが、この例では追加情報を表示する必要はありません。前後の2つの擬似要素を三角形にして固定位置に配置するだけです。

完全なコードは次のとおりです:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
     .sharp:before{   
         content:"";　　//不需要展现文字等内容,所以设置为空字符   
         width:0px;   
         border-bottom:80px solid transparent;   
         border-top:80px solid transparent;   
         border-right:40px solid #6c6;   
         position:absolute;   
         left:-40px;   
         top:0px;   
     }   
     .sharp{   
         min-width:100px;   
         height:160px;   
         background:#6c6;   
         display: inline-block;   
         position: absolute;   
         line-height: 160px;   
         color:#FFFFFF;   
         font-size: 20px;   
         text-align: center;   
     }   
     .sharp:after{   
         content:"";　　//不需要展现文字等内容,所以设置为空字符   
         width:0px;   
         border-bottom:80px solid transparent;   
         border-top:80px solid transparent;   
         border-left-width:40px;   
         border-left-style: solid;   
         border-left-color:#6c6;   
         position:absolute;   
         right:-40px;   
         top:0px;   
     }   
        #sharpContainer{   
            width:100%;   
            height: 600px;   
        }   
        #sharpContainer .center{   
            top:200px;   
            left:300px;   
        }   
         #sharpContainer .top{   
             top:20px;   
             left:300px;   
         }   
         #sharpContainer .top-left{   
             top:110px;   
             left:140px;   
         }   
         #sharpContainer .top-right{   
             top:110px;   
             left:460px;   
         }   
         #sharpContainer .bottom{   
             top:380px;   
             left:300px;   
         }   
         #sharpContainer .bottom-left{   
             top:290px;   
             left:140px;   
         }   
         #sharpContainer .bottom-right{   
             top:290px;   
             left:460px;   
         }   
    </style>
</head>
<body>
<p id="sharpContainer">
    <p class="sharp center">
    </p>
    <p class="sharp top">
    </p>
    <p class="sharp top-left">
    </p>
    <p class="sharp top-right">
    </p>
    <p class="sharp bottom">
    </p>
    <p class="sharp bottom-left">
    </p>
    <p class="sharp bottom-right">
    </p>
</p>
</body>
</html>

三角形の描画方法と、:before、:after 疑似クラススタイルの使用方法を理解している限り、六角形の描画は実際には非常に単純な効果です。将来的には、プロジェクトにさらに不規則なグラフィックを追加することができます

上記がこの記事の全内容です。その他の関連コンテンツについては、PHP 中国語 Web サイトに注目してください。

CSS3で六角形を描画する方法について

関連記事