CSS、SVG、または Canvas を使用してレスポンシブな台形形状を作成するにはどうすればよいですか?

CSS、SVG、Canvas でのレスポンシブ台形シェイプ

質問:

どうすればよいですかCSS、SVG、またはCanvas?

答え:

台形を作成するには、利点と制限が異なるいくつかの方法があります。以下にいくつかの応答性のオプションを示します。

CSS 境界線:

CSS 境界線の使用は、最も広くサポートされているアプローチであり、デスクトップ上の IE およびすべての最新ブラウザーと互換性があり、 mobile.

HTML:

<div>

CSS:

#trapezoid {
  border-left: 20vw solid red;
  border-top: 5vw solid transparent;
  border-bottom: 5vw solid transparent;
  width: 0;
  height: 10vw;
}

利点:

• 優れたブラウザサポート
• 実装が簡単

欠点:

• 枠線には角が丸いなどの制限があります

以上がCSS、SVG、または Canvas を使用してレスポンシブな台形形状を作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。