HTML5などを使って、六角形の画像を敷き詰めて、ハニカム画像を作りたい

Question

HTML5などを使って、六角形の画像を敷き詰めて、蜂の巣（ハニカム）の画像を作りたいです。
画像は、透過背景の六角形の画像をひとつだけ用意します。
入力フォームに入力された数の分だけ六角形を隙間なく敷き詰めたいです。
六角形を敷き詰めるには、縦や横方向にずらしつつ、重ねて配置しなければなりません。
HTML5などを使って、実現できないでしょうか。

Comments

[kei344]

まだ質問が「受付中」になっていますが、「ベストアンサー」を選び「解決済」にされてはいかがでしょうか。

Answer 1

CSS Hexagon Tutorialが参考になるかと。

htmlの直接の記載はないです。
html部分は六角形の部分のソースを見てください。見方はまずは調べて解らなければ質問すれば誰かが答えてくれるでしょう。

Comments

[RyoUY]

CSSで3D効果までできるとは知りませんでした。ありがとうございます。
参考にしながら制作したいと思います。

Answer 2

イメージとしてはこんな感じでしょうか？

https://codepen.io/raccy/full/xBKBew

数字を増やしていくとハニカムしていきます。10個で折り返します。ただ、どこかで限界が出るようです。Chromeだと52個で限界が来ます。理由はよくわかりません。

ソースを見たい場合はChange ViewでEditor Viewを選んでください。Pug + Sass + CoffeeScriptで書いていますが、「∨」を押してView Compiled ...を選べばコンパイル後のHTMLやCSSやJavaScriptを確認できます。

適当にとりあえず作ったので隙間はあります。CSSでボーダーを無理矢理引いていますが、背景画像にするかSVGで作った方が良いでしょう。微妙な隙間は計算で微調整するしか無いです。辺を1とすると高さは√3ですが、そこにボーダーのサイズなどを考慮する必要が出てきます。

Comments

[RyoUY]

z-indexでずらして、
inline-blockで並べて、
transform: rotate　で回転させるんですね。

CSSで知らないことが多かったです。解決できました。ありがとうございます。

Answer 3

Takumibooさん
回答ありがとうございます。その方法は思いつきませんでした。それだと、端の画像が切れてしまい違和感が出てしまいます。

Comments

[Takumiboo]

ご返信は回答ではなくて、このようなコメントでいただけますか？
具体的にどのような見た目にしたいのかのイメージを提示されると回答も付きやすいと思います。

Answer 4

僕なら六角形が並んでいる状態を画像処理ソフトで作って、
タイルにできるように正方形に切り出しちゃいますが、それじゃダメなんですかね