如何使用 svg 创建梯形？答案

【问题标题】：How to create a trapezium shape using svg?如何使用 svg 创建梯形？
【发布时间】：2021-08-10 17:27:32
【问题描述】：

我希望为我的网页绘制一个倒置的聚光灯。我会在这里添加一些有用的代码，但没有任何代码，而且我已经用尽了整个互联网来寻找任何有用的东西。我还在学习 HTML 和 CSS，所以在这些领域的任何建议都会很好。另外，我知道创建梯形的常用方法是使用“border-bottom/left/right”属性，但问题是我无法用渐变填充形成的形状。因此，任何有关如何创建这样的梯形的帮助：\_/ 都会很有帮助。

【问题讨论】：

嗨，Jacob，欢迎来到堆栈溢出和 Web 开发。分享您尝试过的任何东西更合适，更重要的是首先尝试花一些时间找出解决方案。这是我可以给你的一个建议，以提高你在学习编码时的表现。顺便说一句，我假设您可以在这种情况下使用剪辑路径来创建所需的形状。 Try out this generator
对于 SVG - 试试 tutorials.jenkov.com/svg/index.html
@RifkyNiyas 感谢您的盛情款待。我理解您的观点，如果还剩下一个，我真的会发布一个有用的代码。我尝试了几种方法，但都没有奏效，这真的很令人沮丧，所以我最终删除了所有这些。但下次我会记住你的建议。感谢您的链接，很高兴尝试。祝您有美好的一天！

标签： html css svg frontend

【解决方案1】：

在没有 svg 的情况下创建梯形的一种方法是使用 CSS 剪辑路径，路径被定义为多边形。可以将多边形的点设置为 % 值，以便使元素具有响应性。

这个 CSS

.trapezium {
  width: 30vmin;
  height: 20vmin;
  background-image: linear-gradient(red, orange, yellow, blue, green);
  clip-path: polygon(0 0, 100% 0, 80% 100%, 20% 100%);
}

给出这个：

.trapezium {
  width: 30vmin;
  height: 20vmin;
  background-image: linear-gradient(red, orange, yellow, blue, green);
  clip-path: polygon(0 0, 100% 0, 80% 100%, 20% 100%);
}

&lt;div class="trapezium"&gt;&lt;/div&gt;

如果必须是 SVG 而不是通过纯 CSS/HTML 实现，您可以使用类似的技术。请参阅 https://developer.mozilla.org/en-US/docs/Web/SVG/Element/polygon，其中描述了如何将多边形用作 SVG 路径。

【讨论】：

哇。非常感谢！！那行得通，而且它绝对比 SVG 更容易。你真是天赐之物！再次感谢和欢呼！

【解决方案2】：

我认为 SVG 更容易。但请自行判断。这是与 div/CSS 版本等效的 SVG。

.trapezium {
  width: 30vmin;
}

<svg viewBox="0 0 30 20" class="trapezium">
  <defs>
    <linearGradient id="grad" x2="0" y2="1">
      <stop offset="0%" stop-color="red"/>
      <stop offset="25%" stop-color="orange"/>
      <stop offset="50%" stop-color="yellow"/>
      <stop offset="75%" stop-color="blue"/>
      <stop offset="100%" stop-color="green"/>
    </linearGradient>
  </defs>
  
  <polygon points="0,0, 30,0, 24,20, 6,20" fill="url(#grad)"/>
</svg>

【讨论】：