CSSの進化がすごい！レスポンシブ対応の六角形のヘキサゴン レイアウトを簡単に実装できるスタイルシート

シンプルなHTMLで、レスポンシブ対応の六角形のヘキサゴン レイアウトを簡単に実装できるスタイルシートを紹介します。 JavaScriptは完全に不要で、CSS Gridを使用してdiv要素にclassを付与するだけで実装できます。 Hexi-Flexi Grid Hexi-Flexi Grid -GitHub Hexi-Flexi Gridの特徴 Hexi-Flexi Gridのデモ Hexi-Flexi Gridの使い方 Hexi-Flexi Gridの特徴 JavaScriptは必要なし、CSSのみで実装。 六角形のアイテムの高さ・幅、列・行は自由に設定。 セル、列、行のモジュラー形式。 背景画像を自動入力する機能をサポート。 サポートブラウザ CSS Gridで実装するため、サポートブラウザは下記の通りです。 Firefox 56+ Chrome 61+ Safari 10.1+

[kiyo_hiko]

すごい

[idr_zz]

ヘキサゴ〜ン！六角形はclip-pathのようだ。 CSSの進化がすごい！レスポンシブ対応の六角形のヘキサゴン レイアウトを簡単に実装できるスタイルシート

[suika3417]

アンサガのパネルを思い出してしまった

[nai_nari]

ブラウザ上で動作する戦略ゲームなどに使えそうですね。ティラノスクリプトとかとも相性よいかも。

[style_blue]

へぇ、面白い。面白いだけだけど。

[kathew]

何かに使えるかなと思ったけど、見たまんまの用途しかなさそう。けっこう、良い。

[hirorock]

へぇー

[kicchysan]

CSSの進化がすごい！レスポンシブ対応の六角形のヘキサゴン レイアウトを簡単に実装できるスタイルシート #HTML #CSS #JavaScript http://coliss.com/?p=23135