html - 响应式 CSS 梯形

Question

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

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

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 Transforms 中的透视方法。它现在在所有现代浏览器中都得到了相当好的支持，但很难获得您想要的确切形状大小。

• 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 创建任何和所有形状的最简单的方法(至少在我看来)，但即使在现代浏览器中也没有得到很好的支持。

• 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

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>