CSS3-hexagon_html/css_WEB-ITnose-htmlチュートリアル-php.cn

ホームページ

ウェブフロントエンド

htmlチュートリアル

CSS3-hexagon_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:28 AM

2 つのメソッドを整理しましたが、読んだ後はとても簡単だと思います~

1. 回転タイプ

早速、必要なスタイルを見てみましょう:

1.transform :rotate(angle)

2.overflow

3.visibility

効果: デモンストレーションエフェクト、runjs

html構造:

<body>    <div class="box1">        <div class="box2">            <div class="box3">                <p>为所欲为为所欲为</p>            </div>        </div>    </div></body>

ログイン後にコピー

3層div、構造は非常に単純です~回転方法次？

理解しやすいように背景を追加しました

box1: 赤

box2: 黒

box3: ピンク

1.box1 は 120° 回転し、box2 は -60° 回転し、box3 は再び -60° 回転します。コンテンツは box3 に配置されます。

2. 回転後には余分な部分があるはずなので、3 つの div のすべてに overflow:hidden を設定します。

3.box1 と box2 は六角形を取得するために回転するために使用されるため、Box3 には表示する必要があるコンテンツが含まれているため、visibility:visible を設定します。

(box3 の Visibility:visible; を設定しない場合、box2 の Visibility:hidden; が継承されます)

div の幅と高さは等しくなくてよいことに注意してください。そうでない場合、結果は六角形。

余分な部分を回転して非表示にした後、必要な 6 辺の形状を得ることができます。すべてのコードは次のとおりです:

        CSS3—六边形    <body>    <div class="box1">        <div class="box2">            <div class="box3">                <p>为所欲为为所欲为</p>            </div>        </div>    </div></body>

ログイン後にコピー

2. スプライシングタイプ

効果を見てください: デモンストレーション効果, runjs

明らかに三角形2つと長方形1つですね、とてもシンプルですね〜

三角形については前の記事を参照してください: CSS3-Triangle

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

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>css—六边形2</title>    <style>    .triangleb{        width:0;        height:0;        border-top:0px solid transparent;        border-right:60px solid transparent;        border-bottom:40px solid pink;        border-left:60px solid transparent;    }    .trianglet{        width:0;        height:0;        border-top:40px solid pink;        border-right:60px solid transparent;        border-bottom:0px solid transparent;        border-left:60px solid transparent;    }    .box{        width: 120px;        height: 65px;        background-color: pink;    }</style></head><body>    <div class="triangleb"></div>    <div class="box"></div>    <div class="trianglet"></div></body></html>

ログイン後にコピー

このウェブサイトの声明

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