CSS渐变将div从左下角到右上角分成两半

Question

有没有可能只用渐变属性来实现？ 它应该是什么样子:

我已经试过了，但它没有正确拆分。

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

Answer 1

是的，你可以做到。使用“到右下角”并删除 Angular 。

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>