CSSで台湾の国旗を描く

@alvaromontoro の作品にとても感銘を受けました

CSS でトーゴの国旗を描く

アルバロ・モントロ ・ 11月19日

#css #html #webdev

単一の div と一連のマジック CSS を使用してトーゴの国旗を描画する方法。それは私にとって本当に衝撃的です。したがって、私も同じことをしたいと思っています。これが私がやった方法です。

HTML

を 1 つ追加します。いくつかのアリア属性を備えています。これは、フラグをレンダリングする単一の になります。

<div role="img" aria-label="Flag of Taiwan" class="flag taiwan"></div>

CSS

@alvaromontoro と同じ方法を使用して、台湾の国旗の基本的な背景を作成しました。赤い背景色と左上の青い四角形です。

.flag.taiwan {
  aspect-ratio: 3 / 2;
  height: 500px;
  position: relative;
  background: linear-gradient(rgb(19, 53, 129) 0 0) 0 0 / 50% 50% no-repeat,
    rgb(205, 44, 36);
}

太陽

OK、最も簡単な部分は完了です。さあ、いよいよ本番です。旗に太陽。

12本の梁と中心に円があり、かなり複雑に見えます。疑似要素 ::before と ::after を使用してそれらを描画するにはどうすればよいでしょうか? path() は任意の形状を描画できるため、clip-path: path() のみがそれを行う唯一の方法であるように感じます。ただし、clip-path: path() には致命的な欠点があります。応答しないということです。つまり、そのアプローチを選択した場合、旗のサイズは 1 つだけになります。

台湾の国旗の多くの SVG ファイルをグーグルで検索し始めました。そして、太陽を表すのに 2 つの要素しか使用していないことに気づきました。

1. 白い 12 ビームの星
2. 青い境界線が付いた白い円

星の中心に円を置いたとき。必要な間隔で円を囲む 12 本の梁があるように見えます。とても賢いです！デザイナーたちは、太陽を描くこの賢い方法をすでに見つけたようです。このアプローチを採用すると、::before を円として使用し、::after を星として使用できます。

12ビームスター

台湾の国旗の SVG ファイルを見つけるのは非常に簡単です。残念ながら、星はすべて path() によって描画されます。これは、実際の

それは本当に難しい問題です。私の最終的な解決策は、本当に 12 ビーム スターのすべての点のすべての位置を計算することですか?この素晴らしいオンライン SVG パス エディター https://yqnn.github.io/svg-path-editor/ を利用して、パス内のすべてのポイントを視覚化しました。

そして私は数学がとても得意な親愛なる兄に、残りの点の位置は何なのかを尋ねました。彼は mathematica を使って 12 個の一次方程式を解き、すべての点を獲得しました。 ?

次に、パス エディターに戻って星の輪郭をパスとして描画し、100*100 のスコープ内に収まるようにスケールしました。

次に、すでに 100*100 スコープ内にあるため、すべての位置をパーセンテージに変換します。その結果、旗に星を表示することができます

<div role="img" aria-label="Flag of Taiwan" class="flag taiwan"></div>

サークル

サークルは比較的簡単です。ただし、最初の試みは境界線を使用することでした。境界線の幅は px までしか指定できないため、失敗しました。放射状グラデーションを使用するように変更しました。難しいのは、radial-gradient のパーセンテージは要素の対角線である必要があるため、計算も必要ですが、それほど難しいことではありません。

.flag.taiwan {
  aspect-ratio: 3 / 2;
  height: 500px;
  position: relative;
  background: linear-gradient(rgb(19, 53, 129) 0 0) 0 0 / 50% 50% no-repeat,
    rgb(205, 44, 36);
}

結果

完全な CSS は次のとおりです

&::after {
    content: '';
    position: absolute;
    top: 6.25%;
    left: 12.5%;
    width: 25%;
    height: calc(3 / 8 * 100%);
    background: white;
    clip-path: polygon(50% 0%,56.6987% 25%,75% 6.6987%,68.3013% 31.6987%,93.3013% 25%,75% 43.3013%,100% 50%,75% 56.6987%,93.3013% 75%,68.3013% 68.3013%,75% 93.3013%,56.6987% 75%,50% 100%,43.3013% 75%,25% 93.3013%,31.6987% 68.3013%,6.6983% 75%,25% 56.6987%,0% 50%,25% 43.3013%,6.6983% 25%,31.6987% 31.6987%,25% 6.6983%,43.3013% 25%);;
  }

以下の codepen に関する私の取り組みもご覧いただけます

気に入っていただければ幸いです!

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