响应式 CSS 梯形

Question

我想创建一个响应式梯形，它可以是 CSS、SVG 或 Canvas。

我已经能够创建三角形，但不能创建响应式的梯形。

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

<div></div>

我看到有很多关于 SO 的问题已经包含梯形，但很少有理由说明为什么它们比其他方法更好，而且大多数人没有回应。

例如，这些问题不需要响应，因此答案没有响应：

CSS3 Transform Skew

Answer 1

创建梯形的方法有很多种，每种方法都有自己的优缺点。

下面是各种方式的综合列表，所有方式都应该是响应式的。

CSS边框

所有答案中支持度最高的。它支持回到 IE 以及桌面和移动设备上的所有其他浏览器。

border - CSS | MDN

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

<div id="trapezoid"></div>

CSS透视

CSS 中的一种相当新的方法是 CSS 转换中的透视方法。它现在在所有现代浏览器中都得到了相当好的支持，但很难获得您想要的确切形状大小。

perspective - CSS | MDN

#trapezoid {
  margin-top: 3vw;
  width: 20vw;
  height: 10vw;
  background-color: red;
  transform: perspective(20vw) rotateY(45deg);
}

<div id="trapezoid"></div>

CSS 剪辑路径

Clip-paths 创建一个 SVG 风格的剪辑并使用它来创建你想要的形状。这是使用纯 CSS 创建任何和所有形状的最简单的方法（至少在我看来），但即使在现代浏览器中也没有得到很好的支持。

#trapezoid {
  width: 20vw;
  height: 20vw;
  -webkit-clip-path: polygon(0 0, 100% 20%, 100% 80%, 0% 100%);
  clip-path: polygon(0 0, 100% 20%, 100% 80%, 0% 100%);
  background: red;
}

<div id="trapezoid"></div>

CSS 伪元素倾斜

这个答案是 web-tiki

给我的

它与透视答案的相似之处在于它使用变换，但也使用具有偏斜的伪元素。

skew - CSS | MDN

#trapezoid {
  position: relative;
  background: red;
  width: 20vw;
  height: 12vw;
  margin: 8vw 0;
}
#trapezoid:before,
#trapezoid:after {
  content: '';
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
  background: inherit;
  transform-origin: 100% 0;
  transform: skewY(-20deg);
}
#trapezoid:before {
  transform: skewY(20deg);
}

<div id="trapezoid"></div>

SVG

SVG 代表可缩放矢量图形。 Web 浏览器将其视为图像，但您可以在 SVG 中添加文本和普通 HTML 元素。

它在所有浏览器中都得到了很好的支持，如下所示：CanIUse

SVG | MDN

<svg id="trapezoid" viewbox="0 0 100 100" preserveAspectRatio="none" width="20%">
  <path d="M0,0
           L100,20
           L100,80
           L0,100z" fill="red"></path>
</svg>

Canvas

Canvas 类似于 SVG，但使用光栅（基于像素）而不是矢量来创建形状。

浏览器对 Canvas 的支持是 quite good.

var shape = document.getElementById('trapezoid').getContext('2d');
shape.fillStyle = 'red';
shape.beginPath();
shape.moveTo(0, 0);
shape.lineTo(100, 20);
shape.lineTo(100, 80);
shape.lineTo(0, 100);
shape.closePath();
shape.fill();

<canvas id="trapezoid"></canvas>

Answer 2

我将添加上面答案中缺少的方法：

多重背景 & linear-gradient

#trapezoid {
  width: 200px;
  height: 100px;
  background:
    /* Center area (rectangle)*/
    linear-gradient(red,red) center /100% calc(100% - 40px),
    /* triangle shape at the top*/
    linear-gradient(to bottom left, transparent 49%,red 51%) top    / 100% 20px,
    /* triangle shape at the bottom*/
    linear-gradient(to top    left, transparent 49%,red 51%) bottom / 100% 20px;
    
  background-repeat:no-repeat;
  animation:change 2s linear infinite alternate;
}

@keyframes change {
  from {
    width: 200px;
    height: 100px;
  }
  to {
    width: 120px;
    height: 180px;
  }
}

<div id="trapezoid"></div>

同样的想法可以与蒙版一起使用以具有任何类型的背景：

#trapezoid {
  width: 200px;
  height: 100px;
  -webkit-mask:
    /* Center area (rectangle)*/
    linear-gradient(red,red) center /100% calc(100% - 40px),
    /* triangle shape at the top*/
    linear-gradient(to bottom left, transparent 49%,red 51%) top    / 100% 20px,
    /* triangle shape at the bottom*/
    linear-gradient(to top    left, transparent 49%,red 51%) bottom / 100% 20px;    
  -webkit-mask-repeat:no-repeat;
  background:url(https://picsum.photos/id/1064/400/300) center/cover;
  animation:change 2s linear infinite alternate;
}

@keyframes change {
  from {
    width: 200px;
    height: 100px;
  }
  to {
    width: 120px;
    height: 180px;
  }
}

<div id="trapezoid"></div>