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

Question

I'm interested in technique, that allows to make such gradients OVER another div (white fading horizontal line). This is what I want it look like:

And this is what I have at the moment (yeah, I know):

Horizontal line is a simple

---

with color css property, Gradient is:

  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%); 

Image is a simple (rails image_tag) with absolute positioning.

Answer 1

Here is a hint. You can create multiple shapes of triangle with CSS and you have to just position and rotate the shapes to match your logo.

For instance, below is an example of one shape. You can take references of it and replicate it and make it the way you want. Here you go.

The HTML:

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

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

}

The "xx" or "x" or "xxx" are dummy values which you can replace it with yours.

Hope this helps.