如何用Div或SVG制作从页面左上到右下的响应式装饰样式

嘿，这个从左上角延伸到右下角的装饰效果实现起来真的不难！我给你分享两种最实用的方案，你可以根据自己的需求挑：

方案一：CSS 线性渐变（最快最简） #

如果只是类似示例里的纯色斜块，用 CSS 渐变绝对是首选——不用额外加 DOM 元素，几行代码搞定，还天生响应式。

你可以直接给 body 加个伪元素，把装饰放在页面最底层不干扰内容：

body::before {
  content: '';
  position: fixed; /* 固定在视口，滚动也不会动 */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* 135deg 是从左上到右下的角度，你可以调整数值改变倾斜程度 */
  background: linear-gradient(135deg, #4a6fa5 0%, #4a6fa5 25%, transparent 25%, transparent 100%);
  z-index: -1; /* 放在内容下面 */
}

• 调整 25% 这个数值可以改变斜块的宽度，比如改成 30% 就会更宽；
• 把 #4a6fa5 换成你想要的颜色就行，甚至可以改成渐变颜色（比如 #4a6fa5 0%, #6b88b7 25%）；
• 因为用了百分比和固定定位，不管屏幕怎么缩放，装饰都会完美适配。

方案二：SVG（适合复杂形状） #

如果之后你想做更复杂的装饰（比如带圆角、不规则边缘，或者需要动画效果），SVG 会更灵活。它是矢量图形，放大缩小不会模糊，响应式也很省心。

你可以直接把 SVG 内嵌到页面里，设置铺满整个视口：

<svg viewBox="0 0 100 100" preserveAspectRatio="none" style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1;">
  <!-- polygon 的四个点分别对应：左上角、顶部25%位置、右下角、左下角 -->
  <polygon points="0,0 25,0 100,100 0,100" fill="#4a6fa5" />
</svg>

• viewBox="0 0 100 100" 相当于给 SVG 设了一个坐标系统，方便你调整形状；
• 改 points 里的数值就能调整斜块的形状，比如把 25,0 改成 30,0 就会让斜块更宽；
• 如果需要圆角，把 polygon 换成 path 就行，用矢量软件（比如 Figma、AI）画好导出代码更方便。

方案对比怎么选？ #

• 追求快速简单：选 CSS 渐变，代码少，性能好，不用额外资源；
• 需要复杂形状/动画：选 SVG，编辑灵活，扩展性强。

内容的提问来源于stack exchange，提问作者user9245313