たったひとつのdivで麻雀牌も描画できるCSSすごい

たったひとつのdivで麻雀牌も描画できるCSSすごい

知ってる人には今さらな手法ですが、私の中で流行っているので載せておきます。
htmlをご覧いただくとわかるかと思いますが、<div></div>のみです。

なんで作ったか:
麻雀の点数計算アプリが作りたくて、順子を表すアイコンのようなものがほしかった。

なんで画像にしなかったか:
CSSでできちゃうんじゃね?って思ったんだもん。

なんでSVGにしなかったか:
それはアイコンじゃない牌姿描画するときにやるよ…

See the Pen たったひとつのdivで麻雀牌のような by natsumi (@mayo31) on CodePen.18228

要素本体のborderが枠、牌同士の区切りは要素のbox-shadowをずらして複数設定しています。
そこに、疑似要素を置いてborder-radius:50%;で円にする。
その疑似要素に対してまたまたbox-shadowでサイズを変えたり色を変えたり位置を変えたりしていきますんで、筒子以外の牌姿はお察しください。

今回の目的は牌姿の表現じゃなくて、あくまでも「順子だよっていうことがわかるアイコン」だからねっ

box-shadowちゃんの自由度が高すぎてかわいいぜ…