从一个边缘到另一个边缘的 CSS 下半部分背景

标签 css

<分区>

我正在尝试制作第二个背景，它应该从一个边缘到另一个边缘。所以在我的示例中:红色 BG 应该从右上角到左下角。

我的问题是，对于响应式 View ，您/我可以如何做到这一点？因此，如果我调整窗口大小，红色背景的边缘将不再适合实际边缘。这甚至可以用 CSS 实现，边缘总是合适的吗？关于响应技巧，我在这一点上陷入困境.. :)

因为如果屏幕较小，您将不得不调整 120 度，不是吗？媒体查询并不是一个真正的选择，因为它们只适用于断点。但它应该适用于每个调整大小的像素。

这是我的例子:

.background {
  width: 100%;
  max-width: 700px;
  height: 300px;
  background: gray;
  position: relative;
}

.background:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    background: linear-gradient(120deg, #cf0529 50%, transparent 50%);
}