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

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

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

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>

同样的想法可以与 mask 一起使用，以获得任何类型的背景：

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