Question

我正在尝试制作第二个背景，该背景应从一个边缘延伸到另一边缘。因此，在我的示例中：红色BG应该从右上角到左下角。

对我来说，问题是，您/我也将如何为响应式视图执行此操作？因此，如果我调整窗口大小，则红色背景的边缘将不再适合实际边缘。 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%);
}

<div class="background"></div>

Answer 1

在此处查看此参考： https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient

您想要的渐变将是：

background: linear-gradient(to bottom left, #cf0529 50%, transparent 50%);

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

1 个答案: