web-dev-qa-db-ja.com

HTMLの六角形のセル

六角形のグリッドであるhtmlブロックを設計する方法はありましたか?蜂の巣のそれに似ています。これは、cssスタイリングタスクのように見えます。

25
Abu

傾斜する大きな境界線を使用したり、要素fyiに三角形を作成したりできます。

例: http://jsfiddle.net/pAGJG/

したがって、上部の三角形、中央のセクション、下部の三角形で<div class="hexagon">を作成し、複数の六角形を作成できます。

編集:

更新された例: http://jsfiddle.net/rRDby/

完全な六角形ではありませんが、どのように使用できるかがわかります。自分だけで楽しむことができます。

編集#2:Stuはすでに何かを行っているようです@ http://www.cssplay.co.uk/menus/hexagon.html

13
meder omuraliev

チェックアウト 2001年からのTantekÇelikの作品 :彼はHTMLとCSSから(他の形状とともに)六角形を生成します。エリック・マイヤーは「スラント」のトピックにも取り組んだ ここLasse Reichstein Nielsenには簡単なハウツーがあります および 他の形状を生成するためのウォークスルー これは役に立つかもしれません。

8
Cal Jacobson

この答えをそこに投げ出すだけです-それが正しいものかどうかは疑わしいですが、OPの言い回しは曖昧であり、正直なところ、他の2つの答えは好きではありません-彼らは不快にハックのように感じます。

「六角形グリッド」が必要な唯一の理由が背景のためである場合は、いくつかの単純なCSS背景タイリングを使用して、通常の六角形グリッドを取得できます。

このようなタイル化可能な画像を撮る:

alt text

次に、いくつかの単純なCSSを並べて表示できます。

background: url('hex-tile.png');

そしてそれは「六角形のグリッド」を形成するためにきちんと繰り返されるべきです。 例: http://jsfiddle.net/MqyHv/1/

7
Yi Jiang