响应式 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
• create an adaptive quadrilateral trapezoid in css

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 剪辑路径

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

• clip-path - CSS | MDN
• CanIUse Support
• clip-path Generator

#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 类似于 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

我要补充一下上面答案的缺失方法：

多背景和线性渐变

#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>