はじめに
TEDのhttps://www.youtube.com/watch?v=mNKz3devFAw と言う動画でCSSでヒゲを描いていた。
- border-bottom: 0 0 0 100% とかで、ひげの先、鋭角を作ることが出来る
のが参考になりました。
再利用が出来るように box の中に配置してみました。
実行例
See the Pen react-css-mustache by kalz2q (@kalz2q) on CodePen.
解説
元のTED話では知らなかった事がいっぱいありました。
- currentColor => Color を変数のように使う 。
- box-shadow => 複数のシャドーをつけて画像として使う。
- border-bottom: 0 0 0 100% とかで、ひげの先、鋭角を作ることが出来る 。
- transform-origin: で回転の中心を変えられるのは知っていたけど、このように使うのは思いついていなかった。
このやり方だと再利用に困難だと思って、改造しました。改造の要点としては、
- shadow を使わないやり方にした。
- 上下左右均等に配置することにより、座標を計算しやすくした。
- できる限りピクセルを直接ではなく、% や calc() を使って計算した座標に配置出来るように心がけた。
