CSS を使用してトーゴの国旗を描画する-CSSチュートリアル-php.cn

CSS を使用してトーゴの国旗を描画する

Susan Sarandon

リリース： 2024-11-22 11:54:14

オリジナル

308 人が閲覧しました

Wikipedia でトーゴの国旗のページを確認すると、次のように説明されています。

緑と黄色が交互に並ぶ 5 本の横縞
左上隅の赤い四角いフィールド
赤いフィールドにある白い五芒星
比率は 3:5 (高さ 3 単位ごとに幅 5 単位)

Drawing Togo

色については、以下を使用します:

#006a4e グリーン用
黄色は #ffce00
#d21034 赤
白の #fff

HTML

単一の HTML 要素を使用してこのフラグをコーディングします。

<div role="img" aria-label="Flag of Togo">



<p>For accessibility reasons, we added a couple of attributes:<br>
role="img" to indicate the element represents an image.<br>
aria-label="Flag of Togo" so assistive technologies can announce the image as Togo's flag.</p>

<p>Maybe it would be better to have a second visually-hidden element with the flag's "alternative text" linked with an aria-labelledby, but we'll keep it as a single element for simplicity.</p>
<h2>
  
  
  CSS
</h2>

<p>Let's start by setting the flag properties that will be needed:<br>
</p>

<pre class="brush:php;toolbar:false">.flag.togo {
  aspect-ratio: 5 / 3;
  position: relative;
}

ログイン後にコピー

アスペクト比を使用して、フラグの比率を設定します (この場合は幅が最初になります)。そして、絶対位置の擬似要素を使用して星を描画し、それをフラグコンテナ内に保持したいため、相対位置を設定します。

背景には、緑、黄、緑、黄、緑の 5 つの水平ストリップが必要です。これは緑と黄色の繰り返しパターンであり、繰り返しの線形グラデーションを使用して簡単にコーディングできます。

.flag.togo {
  aspect-ratio: 5 / 3;
  position: relative;
  background: repeating-linear-gradient(#006a4e 0 20%, #ffce00 0 40%);
}

ログイン後にコピー

Drawing Togo

バーができたので、左上の赤い四角が必要です。疑似要素を使用することもできますが、代わりに、背景に別のグラデーションを追加します。

.flag.togo {
  aspect-ratio: 5 / 3;
  position: relative;
  background: 
    linear-gradient(#d21034 0 0) 0 0 / 36% 60% no-repeat,
    repeating-linear-gradient(#006a4e 0 20%, #ffce00 0 40%);
}

ログイン後にコピー

この新しいグラデーションは完全に赤になり (#d21034 0 0)、旗 (0 0) の左上に位置し、幅は 36%、高さは旗の 60% (36% 60%) になります。 ) したがって、正方形 (36 = 60 * 3 / 5) となる 3:5 の比率が維持されます。そして、それが繰り返されないこと (no-repeat) を確認する必要があります。そうしないと、コンテナー全体が占有され、すべてが赤になります。

Drawing Togo

これで旗のベースができたので、星を描く必要があります。円錐勾配を使用してそれを行うこともできますが、それは少し面倒になるでしょう。代わりに、疑似要素を使用し、それをクリップパスを使用して星形に切り抜きます:

.flag.togo::before {
  content: "";
  width: 20%;
  aspect-ratio: 1;
  position: absolute;
  /* half of the size of the red square */
  left: 18%;
  top: 30%;
  /* translated half its size to top and left to center it */
  transform: translate(-50%, -50%);
  background: #fff;
  clip-path: polygon(50% 2%, 62% 39%, 100% 39%, 69% 61%, 81% 98%, 
                     50% 75%, 19% 98%, 31% 61%, 0% 39%, 38% 39%);
}

ログイン後にコピー

注: これらは星のおおよそのポイントです。三角関数を使用して完璧にすることができます。しかし、これは十分に良い近似値として機能します。
これで完了です。トーゴの国旗の CSS コード全体は次のようになります:

.flag.togo {
  aspect-ratio: 5 / 3;
  position: relative;
  background: 
    linear-gradient(#d21034 0 0) 0 0 / 36% 60% no-repeat,
    repeating-linear-gradient(#006a4e 0 20%, #ffce00 0 40%);

  &::before {
    content: "";
    width: 20%;
    aspect-ratio: 1;
    position: absolute;
    left: 18%;
    top: 30%;
    background: #fff;
    clip-path: polygon(50% 2%, 62% 39%, 100% 39%, 69% 61%, 81% 98%, 
                       50% 75%, 19% 98%, 31% 61%, 0% 39%, 38% 39%);
  }
}

ログイン後にコピー

Drawing Togo