CSS渐变分为从左下到右上半部分

Question

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

我已尝试过此功能，但它没有正确拆分。

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

Answer 1

是的，你可以做到。使用＆＃39;到右下角＆＃39;并删除角度。

＆＃13;

＆＃13;

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;
}

＆＃13;

<div>
</div>

＆＃13;

＆＃13;

＆＃13;