css - 六角形ナビゲーションの整列

Question

これらの六角形を 3 行で隣り合わせに配置するのに苦労しました。これは、操作しようとしているページですhttp://goo.gl/xpHmw

私が達成しようとしている効果

助けと援助に感謝します。

score 0 · Accepted Answer

おそらくそれを達成する方法はたくさんあります。私の解決策は、おそらく六角形を相対的に配置されたコンテナーにラップし、position: absoluteすべての六角形にを割り当て、それぞれを「左」と「上」で手動で配置することです。

理解を深めるためにコードを抽象化しました。 http://codepen.io/nobitagit/pen/ojvue

ps - 次回質問するときは、jsfiddle.net または codepen で問題を抽象化することをお勧めします。そうすれば、他の人があなたに答えやすくなり、問題と解決策が他の人が将来見ることができるようになります。

score 0 · Accepted Answer

さて、家であなたのウェブサイトをチェックしました。

これは、CSS で採用されているような四角形や「ブロック」にうまく適合しないため、CSS で行うのは非常に簡単なことではありません。

いくつか提案があります。おそらくそれはあなたの質問に「答え」ませんが、良いスタートを切るでしょう.

div タグはセマンティック値を保持せず、その点で「空」です。この場合、順序付けられていないリスト内で多数の div タグを使用し<ul>て、六角形の背景を作成しました。これで問題ありませんが、次のことをお勧めします。

div を完全に削除します。順序付けられていないリストには、実際には div があってはなりません。結局、それは「順序付けられていない」リストです。私はdivを排他的に使用するか、さらに良い方法で使用します:
順序付けられていないリストを使用して、各六角形を背景として作成します。1 つのボックスに 1 つの六角形が入ります。六角形はスケーリングしません。トップ/ボトムに個別の div を使用する理由はありません。

絶対配置を使用する必要はありません。これらの六角形のいくつかをオーバーラップさせる必要があるだけです。六角形の 2 行目では、負のマージンを使用してオフセットし、正しい位置に配置できます。角の透過には .png を使用してください。

疑似解:

幸運を。進捗状況を更新して投稿します。さらにお手伝いします。しかし、私はあなたのための解決策を生み出すことはできません.

2 に答える 2