CODEWITHSUNDEEP
csslinear-gradients
o_O
o_O

Reputation: 5747

Reverse CSS triangle gradient?

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.

Upvotes: 0

Views: 931

Answers (2)

Harry
Harry

Reputation: 89780

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>

Upvotes: 1

Mujtaba Fadhil
Mujtaba Fadhil

Reputation: 6116

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

Upvotes: 2

Related Questions