时间戳

首页 > 解决方案 > 如何使用 svg 创建梯形？

html - 如何使用 svg 创建梯形？

问题描述

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

标签： htmlcsssvgfrontend

解决方案

在没有 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%);
}
<div class="trapezium"></div>

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

推荐阅读