如何使用 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

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

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

d 元素中只有一个属性 d 用于定义形状。该属性本身包含一些简短的命令和一些使这些命令起作用所必需的参数。

以下是创建此形状的必要代码：

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

Answer 2

试试这个

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