Question

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

我已经能够创建三角形，但不是一个响应的梯形形状。

＆＃13;

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

＆＃13;

<div></div>

＆＃13;

我已经看到有很多关于SO的问题已经涵盖了梯形形状，但很少有理由说明它们比其他方法更好，并且大多数人都没有反应。

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

Answer 1

有许多不同的方法来创造梯形形状，每种方式都有自己的好处和垮台。

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

CSS Border

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

border - CSS | MDN

＆＃13;

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

＆＃13;

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

＆＃13;

CSS Perspective

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

perspective - CSS | MDN

＆＃13;

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

＆＃13;

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

＆＃13;

CSS Clip-Path

剪辑路径创建一个SVG样式剪辑，并使用它创建所需的形状。这是最简单的方式（至少在我看来），用纯CSS创建任何形状，但即使在现代浏览器中也不受支持。

＆＃13;

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

＆＃13;

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

＆＃13;

CSS Skew with Pseudo Elements

这个答案是web-tiki

给我的

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

skew - CSS | MDN

＆＃13;

#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);
}

＆＃13;

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

＆＃13;

SVG

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

所有浏览器都支持它，如下所示：CanIUse

SVG | MDN

＆＃13;

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

＆＃13;

帆布

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

Canvas的浏览器支持为quite good.

＆＃13;

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();

＆＃13;

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

＆＃13;

Answer 2

我将添加上述答案的遗漏方法：

多个背景＆amp;线性梯度

#trapezoid {
  width: 200px;
  height: 100px;
  background:
    linear-gradient(red,red) 0 20px/100% calc(100% - 40px) no-repeat,
    linear-gradient(to bottom left, transparent 49%,red 51%)0 0/100% 20px no-repeat,
    linear-gradient(to top left, transparent 49%,red 51%)100% 100%/100% 20px no-repeat;
    animation:change 2s linear infinite alternate;
}

@keyframes change {
  from {
    width: 200px;
    height: 100px;
  }
  to {
    width: 120px;
    height: 180px;
  }
}

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

响应式CSS梯形形状

2 个答案:

CSS Border

CSS Perspective

CSS Clip-Path

CSS Skew with Pseudo Elements

SVG

帆布

多个背景＆amp;线性梯度