# この記事の動作環境:Windows7システム、HTML5&&CSS3バージョン、デルのG3コンピューター。CSS で六角形を実装する方法: 1. 2 つの二等辺三角形と長方形を含む 3 つの p を結合します; 2. 3 つの長方形を異なる角度で回転して正六角形を取得します。
CSS で六角形を実装するにはどうすればよいですか?
最近ハニカム レイアウトを作成していたので、六角形の実装原理を研究しました。 六角形を実装する 2 つの方法:
方法 1: 1 つの長方形と 2 つの三角形
まず、境界線を理解する必要があります
各境界線は 45 度離れています。これを使用して三角形を作成できます
<p class="triangle"></p>/*css片段*/.triangle{ width: 0; height: 0; border-bottom: 50px solid red; border-left: 86px solid transparent; border-right: 86px solid transparent; }
# 六角形を作る方法は、3 つの p を組み合わせて、上下に 120 度の二等辺三角形、中央に長方形を配置することです (注: border-top/border -bottom は三角形の高さを決定します)
次に、六角形を実装します
<p class="top-triangle"></p> <p class="center"></p> <p class="bottom-triangle"></p> /*css片段*/ .top-triangle{ width: 0; height: 0; border-bottom: 50px solid red; border-left: 86px solid transparent; border-right: 86px solid transparent; } .center{ width: 172px; height: 100px; background: red; } .bottom-triangle{ width: 0; height: 0; border-top: 50px solid red; border-left: 86px solid transparent; border-right: 86px solid transparent; }
上記のコードから、通常の 6 つの変形を取得できます
方法 2: 3 を回転します。正六角形を取得するためのさまざまな角度の長方形
重要なポイント: オーバーフロー: 非表示;
変換: 回転()
<p class="six"> <p class="child"> <p class="child_child"></p> </p></p>/*css片段*/.six,.child,.child_child{ width: 100px; height: 150px; overflow: hidden; }.six{ -webkit-transform: rotate(120deg); -o-transform: rotate(120deg); -ms-transform: rotate(120deg); -moz-transform: rotate(120deg); transform: rotate(120deg); }.child{ -webkit-transform: rotate(-60deg); -o-transform: rotate(-60deg); -ms-transform: rotate(-60deg); -moz-transform: rotate(-60deg); transform: rotate(-60deg); }.child_child{ background: red; -webkit-transform: rotate(-60deg); -o-transform: rotate(-60deg); -ms-transform: rotate(-60deg); -moz-transform: rotate(-60deg); transform: rotate(-60deg); }
css ビデオ チュートリアル 》]
以上がCSSで六角形を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。