如何使用 CSS、SVG 或 Canvas 建立響應式梯形形狀？

CSS、SVG 和Canvas 中的響應式梯形形狀

問題：

如何我使用CSS、SVG 或建立響應式梯形形狀畫布？

答案：

創造梯形的方法有多種，各有不同的優點和限制。以下是一些響應式選項：

CSS 邊框：

使用 CSS 邊框是最廣泛支援的方法，與 IE 和桌面上的所有現代瀏覽器相容。

HTML:

<div>
<p><strong>CSS:</strong></p>
<pre class="brush:php;toolbar:false">#trapezoid {
  border-left: 20vw solid red;
  border-top: 5vw solid transparent;
  border-bottom: 5vw solid transparent;
  width: 0;
  height: 10vw;
}

優點

優秀的瀏覽器支援
• 容易實作

缺點：

缺點：

邊框有一些限制，如圓角