Reverse CSS triangle gradient?

Question

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.

MujtabaFR · Accepted Answer · 2016-05-18T02:17:51.963

2

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 ..

edited May 18 '16 at 02:17

answered May 18 '16 at 01:54

MujtabaFR

5,956
6
40
66

The first part covers both questions. I don't know why you have the second part there? – o_O May 18 '16 at 14:50

score 1 · Answer 2 · edited May 23 '17 at 10:28

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>

Reverse CSS triangle gradient?

2 Answers2