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

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

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

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

• #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%);
}

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

.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) を確認する必要があります。そうしないと、コンテナー全体が占有され、すべてが赤になります。

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

.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%);
  }
}

いくつかの考え

display: inline-block をフラグのスタイルに追加すると、テキストと一致させることができます。その場合、アスペクト比プロパティが魔法を発揮し、他の値が自動的に設定されるように、高さまたは幅を設定する必要があります。

この旗を描くことで、私たちは次のことを実践しました。

• 位置付け: 相対的および絶対的
• グラデーション: 線形および繰り返し線形
• アスペクト比: 旗と星のサイズを設定します
• クリップパス: 星の形を整える
• 疑似要素: 星そのものを作成する

この短いチュートリアルを楽しんでいただければ幸いです。他のフラグを使用した新しいフラグを間もなくリリースし、線形グラデーションだけでなく、さまざまなグラデーションがどのように機能するかを説明する予定です。ぜひ注目してください!

以上がCSS を使用してトーゴの国旗を描画するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。