CSS gradient split div into to halves from left bottom to top right

0
votes

Is there possibility to achieve it only with gradient property? How it should look like:

how it should look like

I've tried this but it does not split it correctly.

@mixin content-cropped-shape($color, $color2){
  background: $color;
  background: linear-gradient(135deg,$color 0%, $color 50%, $color2 50%, $color2 100%);
}

enter image description here

1
cssgradient
Yes, use the to [side] [side] syntax like in this answer instead of angles. That answer also has an explanation on why the angled gradient doesn't always produce a triangle. You may find it helpful :) - Harry

1 Answers

3
votes

Yes, you can do. With 'to right bottom' and remove the angle.

div {
  background: rgb(255,255,255);
  background: linear-gradient(to right bottom, rgba(255,255,255,1) 0%,rgba(255,255,255,1) 50%,rgba(255,0,4,1) 50%,rgba(249,0,4,1) 100%); 
  height:200px;
}
<div>
</div>