CSSグラデーションで日の丸が実装できるとは驚いた！ 日本の国旗をたった3行のCSSで実装するテクニック
Post on:2025年4月24日
sponsors
昨日、Xで話題になっていたCSSで実装する日本の国旗、日の丸を紹介します。
HTMLはdiv一つだけで、あとはたった3行のCSSで簡単に実装できます。もちろん、レスポンシブにも対応しています。
実際の動作は、デモページでご覧ください。
日の丸は、レスポンシブ対応になっています。
See the Pen
Japanese Flag by coliss (@coliss)
on CodePen.
HTMLは非常にシンプル、classは好きなものをつけてOKです。
|
1 |
<div class="japanese-gradient"></div> |
日の丸は、CSSグラデーションを使って実装します。国旗のサイズは100vminの値を変更してください。
|
1 2 3 4 5 |
.japanese-gradient { background-image: radial-gradient(circle, #BC002D 33%, #FFF 0%); width: 100vmin; aspect-ratio: 3 / 2; } |
元ネタは、下記ポストより。
.japanese-gradient {
background:
radial-gradient(circle, #bc002d 33%, #fff 0);
}p.s you can take this one https://t.co/FO8LkU3ycN pic.twitter.com/VCfJlyOjWM
— jhey ▲ (@jh3yy) April 23, 2025
sponsors
