CSS でハニカム/六角形アトラスを実装するためのサンプルコード

理由は分かりませんが、UIではハニカム効果（手を広げたような効果）のデザインが好まれます。

1. 六角形の実現

まず、六角形を従来の方法で分析してみましょう。

これを 3 つの長方形に分割し、各長方形をプラスまたはマイナス 60° 回転すると、他の 2 つの長方形が得られます。

ここから、基本的なHTML構造を設計することができます。

長方形の幅と高さは最初にランダムに設定され、コンポーネントが形成されるときにそれらの関係が計算され、propsを通じて設定されます。

次にCSSスタイルを設定します

.w-comb { 背景色: #e4e4e4; 表示: インラインブロック; 位置: 相対;
} .w-comb-sub1、.w-comb-sub2 { 背景色: #e4e4e4; 位置: 絶対; 幅: 継承; 高さ: 継承;
} .w-comb-sub1 { 変換: 回転(-60度);
} .w-comb-sub2 { 変換: 回転(60度);
}

六角形が完成しました。

ただし、これは従来の方法にすぎません。互換性の問題を考慮しない場合は、clip-path を直接使用して六角形を描画することもできます。

.w-comb { クリップパス: polygon( 0 25%, 50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75% );
}

とてもシンプルで粗雑です！子ノードや回転は必要ありません。コードを 1 行書くだけで六角形を作成できます。

2. サイズを設定する

実際のアプリケーションシナリオでは、通常、多数の六角形が組み合わされるため、単一の六角形をコンポーネントとして処理する必要があります。

最初の問題は、六角形の大きさをどう設定するかですが、これには中学校で習う数学の知識が必要です。

計算後、長方形の長さがxのとき、幅（辺の長さa）は

対角線bは

次に六角形のサイズを指定します

3 つの長方形を回転させて形成される従来のソリューションの場合:

// 従来のソリューション const RADICAL_3 = 1.7320508; const Comb = (props) => { const { className } = props; const width = props.size || 80; const height = Math.ceil(width / RADICAL_3); return ( <div className={`w-comb ${className}`} style={{ width, height, }}>
      <div className={'w-comb-sub1'}></div>
      <div className={'w-comb-sub2'}></div>
    </div> ) }

clip-path を使用して六角形を直接描画する場合:

// クリップパス
定数RADICAL_3 = 1.7320508; 
const コーム = (props) => {
                           const { クラス名 } = props;
                           const 幅 = props.size || 80; const 高さ = 2 * Math.ceil(width / RADICAL_3); 
                           戻り値 ( <div className={`w-comb-test ${className}`} style={{ width, height, }}></div>) 
			 }

3. ハニカムを配置する

スペースフィールドを定義してmargin-rightを設定し、六角形の行を配置します。

2行目を生成するときは、上と左を調整する必要があります。

左は長方形の長さの半分（x）です（これは基本オフセットであり、実際に必要な距離はこの数値に追加されます）

上端は六角形の辺の長さの半分（a）（底辺オフセット）

後続の各行の上部が増加し、左は偶数行にのみ適用されます。

4. コンテンツを追加する

従来の方式では、水平の長方形が基本となるため、六角形の内容を長方形内に直接書き込むことができます。

これで、CSS でハニカム/六角形アトラスを実装するサンプルコードに関するこの記事は終了です。CSS 六角形アトラスに関するより関連性の高いコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<: Vue3 setup() の高度な使用例の詳細な説明

>>: ウェブページに埋め込まれた Flash と IE、FF、Maxthon の互換性の問題