Wikipedia でトーゴの国旗のページを確認すると、次のように説明されています。
色については、以下を使用します:
単一の 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 サイトの他の関連記事を参照してください。