ホームページ > 記事 > ウェブフロントエンド > CSS3-hexagon_html/css_WEB-ITnose
CSS3-hexagon_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:28:011084ブラウズ
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>