I have two triangles displayed at the bottom of my page - one on the left and one on the right. The right triangle is currently transparent but I want to add a gradient effect to it.
For the triangle-bottom-right, I'd like the gradient to go from rgba(70, 70, 70, 0.15) on the left to rgba(70, 70, 70, 0) on the right. This should be viewable in Chrome (through Electron).
The triangles should be able to resize based on the browser width while maintaining a constant height.
This is the CSS code I'm using:
.triangle-footer {
position: relative;
bottom: 0px;
height: 176px;
width: 100%;
}
.triangle-bottom-left {
position: absolute;
width: 40%;
height: 100%;
left: 0px;
bottom: 0px;
background: linear-gradient(to right top, rgba(94, 194, 82, 100) 50%, rgba(255, 255, 255, 0) 50%);
}
.triangle-bottom-right {
position: absolute;;
width: 125%;
height: 140%;
right: 0px;
bottom: 0px;
background: linear-gradient(to left top, rgba(70, 70, 70, 0.15) 50%, rgba(255, 255, 255, 0) 50%);
}
This is how I've structured my HTML:
<div class="ui fixed bottom sticky triangle-footer">
<div class="triangle-bottom-left"></div>
</div>
<div class="ui fixed bottom sticky triangle-footer">
<div class="triangle-bottom-right"></div>
</div>
(I'm utilizing Semantic-UI for the sticky footer)
Check out the live example here: http://jsfiddle.net/fu2dhfdv/1/