1

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

El Danielo
  • 780
  • 1
  • 8
  • 18
  • Yes, use the `to [side] [side]` syntax like in [this answer](http://stackoverflow.com/questions/37185527/background-with-gradient-responsive/37187994#37187994) 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 Jun 01 '16 at 09:45

1 Answers1

3

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>