Reverse CSS triangle gradient? - css

Question

I have this gradient:
div {
height: 100px;
width: 100px;
background: linear-gradient(-60deg, transparent 63%, white 63%),
linear-gradient(60deg, transparent 63%, white 63%),
linear-gradient(to top, blue, blue);
}
I want to know a) how do I flip it so it's coming from the top and b) how to rewrite without the third part (to top, blue, blue) since I just want a single color and it seems wrong this way.

Answer 1

For the first part, you can try this
div {
height: 100px;
width: 100px;
background: linear-gradient(120deg, transparent 63%, white 63%),
linear-gradient(-120deg, transparent 63%, white 63%),
blue;
}
For the second part, try this
div {
height: 0;
width: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid blue;
}
Hope this will help you ..

Answer 2

This can be achieved with just two linear-gradient images by setting the appropriate background-size and background-position for the images (like in the below snippet).
div {
height: 100px;
width: 100px;
background: linear-gradient(to top right, transparent 49.5%, blue 50.5%),
linear-gradient(to top left, transparent 49.5%, blue 50.5%);
/* the difference in color stops is to produce smoother edges */
background-size: 50% 95%; /* X size should be 50%, Y size can be as you wish */
background-position: left top, right top; /* don't change */
background-repeat: no-repeat; /* don't change */
}
/* just for demo */
div {
border: 1px solid;
display: inline-block;
vertical-align: bottom;
}
div:nth-child(2), div:nth-child(4) { width: 150px; }
div:nth-child(2), div:nth-child(3) { height: 150px; }
<div></div>
<div></div>
<div></div>
<div></div>
I've changed the gradient to the to [side] [side] syntax because it helps in achieving responsive output. (You can refer to this answer of mine for a detailed explanation about why that change helps.)
In the below snippet, I've given two different colors for the gradient so that you could visually see what is happening.
div {
height: 100px;
width: 100px;
background: linear-gradient(to top right, transparent 49.5%, blue 50.5%), linear-gradient(to top left, transparent 49.5%, green 50.5%);
background-size: 50% 95%;
background-position: left top, right top;
background-repeat: no-repeat;
}
<div></div>