在另一個元素上的CSS漸變。 那可能嗎？

Question

我對技術感興趣，該技術可以在另一個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 image_tag）。

Answer 1

這是一個提示。 您可以使用CSS創建多個三角形的形狀，而只需定位和旋轉這些形狀即可匹配您的徽標。

例如，以下是一種形狀的示例。 您可以引用它，然后將其復制並按照自己的方式進行。 干得好。

HTML：

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

CSS：

 .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”是虛擬值，您可以將其替換為自己的值。

希望這可以幫助。