如何使用 HTML 和 css3 绘制曲线和渐变色梯形

Question

如何使用 HTML 和 css3 绘制曲线渐变彩色梯形，如附图所示。

我有这个代码。

#trapezoid {
 height: 0;
 width: 120px;
 border-bottom: 80px solid #05ed08;
 border-left: 45px solid transparent;
 border-right: 45px solid transparent;
 padding: 0 8px 0 0;
}

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

Answer 1

试试这个

.top {
 background: #c02425;
 background: -webkit-linear-gradient(to right, #c02425, #f0cb35);
 background: linear-gradient(to right, #c02425, #f0cb35);
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
 width: 253px;
 height: 90px;
 border-radius: 50%;
 box-shadow: inset 0px 16px #fff, inset 0px 16px 1px 1px #fff;
 -moz-box-shadow: inset 0px 16px #999, inset 0px 16px 1px 1px #999;
 transform: rotateX(180deg);
 position: absolute;
 top: 63px;
 left: -4px;
}
.middle {
 width: 200px;
 height: 200px;
 background: #c02425; /* fallback for old browsers */
 background: -webkit-linear-gradient(to right, #c02425, #f0cb35); /* Chrome 10-25, Safari 5.1-6 */
 background: linear-gradient(to right, #c02425, #f0cb35);
 transform: perspective(9px) rotateX(179deg);
 margin: 150px;
 position: absolute;
 left: -127px;
 top: -27px;
}
div#trapezoid {
    width: 200px;
    height: 400px;
    position: relative;
    top: 20px;
}
.bottom {
    width: 0;
    height: 0;
    position: absolute;
    content: "";
    bottom: -11%;
    left: -13px;
    border: 136px solid rgba(0,0,0,0);
    border-bottom: 27px solid #fff;
    border-radius: 50%;
    transform: rotateX(180deg);
}

<div id="trapezoid">
<div class="top"></div>
  <div class="middle">
  </div>
  <div class="bottom">
  </div>
</div>

Answer 2

SVG 是创建此类形状的推荐方法。它提供简单性和扩展能力。

想法是创建一条曲线并用渐变描边（轮廓）它。我们可以使用 SVG 的 path 元素来创建曲线。

只有一个属性 d 用于定义 path 元素中的形状。此属性本身包含许多短命令和这些命令运行所需的几个参数。

下面是创建这个形状的必要代码：

<defs>
    <linearGradient id="gradient">
        <stop offset="0" stop-color="#e20016" />
        <stop offset="100%" stop-color="#ed6f1d" />
    </linearGradient>
</defs>
<path d="M30,75 Q100,20 170,75" stroke="url(#gradient)" stroke-width="90" fill="none" />

我在 path 元素中使用了 2 个命令。以下是简要说明：

M命令用于定义起点。它出现在开头并指定绘图的起点。
Q命令用于绘制曲线
defs 元素用于定义元素/对象，供以后在 SVG 文档中使用。
linearGradient 元素用于定义可应用于 SVG 文档中任何形状或轮廓的渐变。

输出：

工作示例：

<svg width="200" height="150" viewBox="0 0 200 150">
  <defs>
    <linearGradient id="gradient">
      <stop offset="0" stop-color="#e20016" />
      <stop offset="100%" stop-color="#ed6f1d" />
    </linearGradient>
  </defs>
  <path d="M30,75 Q100,20 170,75" stroke="url(#gradient)" stroke-width="90" fill="none" />
</svg>

如何使用 HTML 和 css3 绘制曲线和渐变色梯形

How to draw a curved and gradient colored trapezoid with HTML and css3

html

css

html5-canvas

css-shapes