CSSで六角形を描くような用事、あるかなぁ・・・?

Pocket

今まで生きてきてCSSで六角形を描けたら便利だよなーという用事に出会ったことがないのですが、CSS Hexagonは六角形を描くようなCSSをジェネレートしてくれるツールです。

使い方

CSS_Hexagon_Generator

画面上部のツールパネルでサイズなどを設定すると・・・

CSS_Hexagon_Generator 2

こんな感じでリアルタイムにプレビューを描画してくれるのと同時に、対応するCSSコードを生成してくれます。Sassのmixinとして生成してくれれば、もっと便利なんですけどねー。

CSS_Hexagon_Generator 4

こんな六角形を作ることもできます。

モチーフとしてはありがちだけれども、Webではあまり見ることはないので、ある意味新鮮かもしれません。

CSS Hexagon