Html CSS在另一个元素上的渐变。可能吗？

我对这项技术感兴趣，它允许在另一个div（白色衰减水平线）上生成这样的渐变。这就是我想要的样子：

这就是我现在所拥有的（是的，我知道）：

水平线是具有颜色css属性的简单

---

， 坡度为：

  pointer-events: none;
  height: 457px;
  position: absolute;
  right: 0;
  top: -80px;
  width: 100%;
  background: radial-gradient(circle at center, rgba(255,255,255,0.15) 0%,rgba(255,255,255,0) 20%);

---

图像是一个简单的（rails图像标签），具有绝对定位。

这里有一个提示。你可以创建多个形状的三角形与CSS，你只需定位和旋转形状，以符合你的标志

例如，下面是一个形状的示例。你可以引用它，复制它，按照你想要的方式制作。给你

HTML:

<div class="shape"></div>

 .shape{ 
height: 100px; 
width: 100px;
position:relative;
background: rgb(xxx,xxx,xxx);
background: -moz-linear-gradient(top,  rgba(xxx,xxx,xxx,xxx) xxx%, rgba(xxx,xxx,xxx,xxx) xxx%); 
background: -webkit-gradient(linear, left top, left bottom, color-stop(xxx%,rgba(xxx,xxx,xxx,x)), color-stop(xxx%,rgba(xxx,xxx,xxx,x)));
-webkit-linear-gradient(top,  rgba(xxx,xxx,xxx,x) xxx%,rgba(xxx,xxx,xxx,x) xxx%); 
-o-linear-gradient(top,  rgba(xxx,xxx,xxx,x) xx%,rgba(xxx,xxx,xxx,x) xxx%);
-ms-linear-gradient(top,  rgba(xxx,xxx,xxx,x) 0%,rgba(xxx,xxx,xxx,x) xxx%); 
linear-gradient(top,  rgba(xxx,xxx,xxx,x) 0%,rgba(xxx,xxx,xxx,x) xxx%); 
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#xxx', endColorstr='#xxx',GradientType=0 ); 
}

.shape:after {
    -moz-transform: rotate(xxdeg);
    -ms-transform:rotate(xxdeg); 
    -webkit-transform:rotate(xxdeg);
    -o-transform:rotate(xxdeg); 
    background: none repeat 0 0 xxx;
    content: "";
    height: xxx;
    left: xxx;
    position: absolute;
    top: xxx;
    width: xxx;

}

“xx”或“x”或“xxx”是虚拟值，您可以将其替换为您的虚拟值

---

希望这能有所帮助。

提供您的fiddle代码。这是用haml和coffee编写的rails应用程序的一部分，我很难将其翻译为纯html和js以发布在fiddle上，所以有必要吗？是的。您可以为此问题上载测试链接。但它位于本地主机上，awwwwwww@Nikita这有什么难的？当您查看源代码时，浏览器实际上以简单的HTML、CSS和JavaScript实现了这一切。