少し前にXで話題になっていた、CSSで日の丸を描く方法をご紹介します。 完成すると下記のようになります。

日本国旗の実装

divとcssで簡単に描けるので気持ち良いです。それではコードを見ていきましょう。
HTMLはDIVで1行です。

<div class="japanese-flag"></div>

CSSで背景にグラデーションを指定します。日本国旗はアスペクト比3:2です。

.japanese-flag {
  background: radial-gradient(circle, #bc200d 33%, #fff 0);
  width: 50vmin;
  aspect-ratio: 3 /2;
}

画面の端にくっついていてよくわからないので整えます。

  <div class="sample">
    <div class="japanese-flag"></div>
  </div>

グリッドのplace-itemsを使うとド真ん中に配置できて便利です。

.japanese-flag {
  background: radial-gradient(circle, #bc200d 33%, #fff 0);
  width: 50vmin;
  aspect-ratio: 3 /2;
}

.sample {
  display: grid;
  place-items: center;
  background: #333;
  height: 100vh;
}

完成品はこちらです。

See the Pen japanese flag by Masaomi Miyawaki (@Masaomix) on CodePen.

国旗のアスペクト比

後ほど紹介します元ネタの投稿で3:2となっていたので採用しましたが、国旗は本当に3:2なのか？が気になったので調べてみました。国連が定めた国際基準サイズが2対3なのだそうです。3対2じゃないの？と思いましたが、こと国旗に関する記述は横：縦ではなく縦：横で記述する事が一般的なようですので以下これに合わせます。（モニター画面などは16:9と表記するので違和感がありますが）

とはいえすべての国がこれを採用しているわけではなく、1/4の国家しか2:3ではないようです。日本、中国、フランスなどが2:3を準拠しています。

イギリス／ロシア　1:2
アメリカ　1:1.9　細かいので1:2と表記されることも多いようです
ドイツ　3:5
スイス／バチカン　1:1
デンマーク　28:37
ノルウェー／イスラエル　8:11

こんなにバリエーション豊かだったとは。これでは収拾がつかないためオリンピックでは参加国全てが便宜上2:3を使用するようです。

Xで話題になった元ネタはこちらです。

国旗の実装方法

実際にサイト制作で国旗を使用する場合の実装方法も紹介します。日の丸だけということはないでしょうから参考にしてみてください。
CDNを読み込みます。

<link href="https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/4.1.3/css/flag-icons.min.css" rel="stylesheet">

CSSにflag-iconとfral-icon-国コードを指定して呼び出します。

<div class="flag-icon flag-icon-jp"></div>
<div class="flag-icon flag-icon-us"></div>
<div class="flag-icon flag-icon-es"></div>
<div class="flag-icon flag-icon-de"></div>
<div class="flag-icon flag-icon-fr"></div>
<div class="flag-icon flag-icon-ar"></div>
<div class="flag-icon flag-icon-br"></div>

国コード一覧はこちらです。
https://www.moj.go.jp/MINJI/common_igonsyo/pdf/001321964.pdf