div 要素の背景を途中まで塗りたい。
そのために HTML 要素追加したくないし、svg とかは過剰。
CSS でなんとかしたい。
linear-gradient がグラデーション目的だと思ってたけど、こいつには色の経由点を指定できるので、くっきり途中まで塗れる。
linear-gradient
/* これは上から下に向かって、白から赤にグラデーション */
background: linear-gradient(white, red);
/* これと同義 */
background: linear-gradient(white 0%, red 100%);
こんな感じになる。
これを、白と赤の色経由点をどちらも50%にしてあげるとくっきりとした線になる。
background: linear-gradient(white 50%, red 50%);
ここまで気づいて MDN(linear-gradient) 見たら親切に解説に書いてあった。
2つ以上の色経由点が同じ位置である場合、その位置で宣言された最初と最後の色の間で明確な線になります。
活用
国旗いける。
background: linear-gradient(
to right,
#002395 calc(100% / 3),
#ffffff calc(100% / 3),
#ffffff calc(200% / 3),
#ed2939 calc(200% / 3)
);
ちなみに、
長年の間、トリコロールは30（青）:33（白）:37（赤）の比率となっていた。しかし、資料によっては数値の順番が異なるなど混乱が見られる。30:33:37は旗竿から遠い右ほどはためきにより幅狭く見えるのを補うため、33:30:37はこれは明るく見える白が人間の目には大きく見えるのを補うため、と説明される。現在は、海上用のみに利用され、陸上用では3色とも同じ幅と定められている。
フランスの国旗 | Wikipedia
だそうだ。
CSS で国旗作ってるリポジトリを見つけたので眺めてみたらやはり線を引く helper を linear-gradient で実現していた。
pixelastic/css-flags
以上。