响应式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变换歪斜
• 在css中创建一个自适应的四边形梯形

Answer 1

有许多不同的方法来创建梯形形状,每个方法都有自己的好处和垮台.

以下是各种方式的综合列表,所有方式都应该响应.

CSS边框

所有答案都得到了最好的支持.它支持回到IE以及桌面和移动设备上的所有其他浏览器.

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

• 透视 - 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支持
• 剪辑路径生成器

#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给我的

它类似于透视答案,因为它使用变换但也使用具有偏斜的伪元素.

• 偏斜 - 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的支持非常好.

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>