「CSS Art: The Flower」にてCSSを使って花っぽい図形を描く方法が紹介されています。

実際の出来上がりは以下のような感じで、花というには少しシンプルなのですが、これが10個のdivタグとCSSだけで描かれているというのが驚き。

CSSのポイントは「-moz-border-radius」や「-webkit-border-radius」といった、角丸を描くプロパティを利用するところのようです。そのためFirefoxやSafariでは正しく描画されてますが、IEではダメっぽいです。

• 
• ツイートで共有

著者について

F.Ko-Ji

Webエンジニアやってます。最近は ドットインストール の開発がお仕事です。その傍ら、個人で Meity や 電車遅延なう、梅酒.in、 #グラドル自画撮り部 の部室といったネットサービスを開発・運営してます。梅酒と草野球とリアル脱出ゲームが好きです。

» 詳しいプロフィールや運営サービスの一覧など