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

是的，你可以做到。使用 'to right bottom' 并删除角度。

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>

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

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

css

gradient