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

Question

如何使用HTML和css3（如附加图像）绘制弯曲渐变色梯形。

我有这段代码。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

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

这个想法是用渐变创建一个曲线和描边（轮廓）。我们可以使用SVG＆＃39; 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文档中任何形状或轮廓的渐变。

<强>输出：

工作示例：

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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>