こんにちは！inglowの開発担当です。
今回は、cssで道路標識の絵を描画してみました。

ベースの作成

まずは、標識のベースを作成します。
今回は、丸型とひし形の標識なので、2種類の標識のベースを作成します。
標識の背景を描画する要素と、標識の絵を描画する要素を分けて、標識の背景の上に絵が乗る構造にしました。
また、使用する色も赤・黄色・青・黒がそれぞれ同じ色なので、カスタムプロパティ（css変数）で定義して利用しました。

それでは、それぞれコーディングしてみます…！

レベル1　車両進入禁止

こちらは基本的なcssのみで実装ができます。
丸と四角だけなので超簡単ですね！！

レベル2　落石注意

少し応用部分が出てきました。
三角のお山と、落ちてくる石がポイントです。
このあたりになってくると、webページでのコーディングではあまり利用しない「transform」が必要になってきます。

レベル3　大型貨物自動車等通行止め

さらに応用が出てきました。
背景に赤い車線があること、トラックをどのような形状に分割してコーディングするかを工夫する必要が出てきました。
ここからは、「border-radius」を四隅で違う値を指定して形状を作っていきます。

レベル4　動物注意（たぬき）

たぬき部分が超難しかったです…。
三角を作る、border-radius、transform…などcssのプロパティ・テクニックをふんだんに使用しました。

さいごに

今回初めて知ったプロパティや初めて使ったプロパティがたくさんありました。 css3が登場した当初から、cssで絵を描く猛者はいましたが、自分でやってみてはんぱない人たちなんだなということがわかりました！
また、さまざまなプロパティを使って、どのように形状を表現するのかをたくさん考えるcssのプロパティのことがより理解できて勉強になると思います。
みなさんももし興味がでてきたら一度作成してみてください。