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
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.
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.