制作单页网站时，如何实现斜角透明背景矩形及图片斜切效果？

嘿，这两个问题我都碰到过，给你分享下靠谱的解决方案：

完全可以用SVG实现，而且这是非常合适的方案——SVG天生擅长创建自定义形状，对透明度的控制也精准，还能完美适配不同屏幕尺寸。

你可以用<polygon>标签绘制这个倾斜矩形，设置好四个顶点的坐标，再通过fill属性定义棕色透明的颜色（比如rgba(120, 80, 40, 0.6)，你可以根据需求调整颜色和透明度数值）。

示例代码如下：

<svg width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="none">
  <polygon points="0 15, 100 0, 100 100, 0 100" fill="rgba(120, 80, 40, 0.6)" />
</svg>

把这个SVG作为背景层（可以用CSS的background-image引用，或者直接嵌入HTML），它会自动铺满整个容器，完全符合你要的“贯穿网站视图”的效果。

这里有三种实用的方法，你可以根据自己的需求选择：

方法1：CSS clip-path（最推荐，简单高效） #

用CSS的clip-path属性直接裁剪图片成目标形状，这种方法不会让图片内容变形，代码也极简：

.skewed-image {
  clip-path: polygon(0 0, 100% 10%, 100% 100%, 0 90%);
  /* 你可以调整百分比数值，匹配目标图的倾斜程度 */
}

把这个类加到你的图片标签上就行，现代浏览器都支持，唯一要注意的是旧版IE不兼容，但如果你的目标是现代浏览器，这绝对是首选。

方法2：CSS Transform + 容器裁剪 #

如果需要兼容更旧的浏览器，或者想让图片内容跟着倾斜（不过看你的目标图应该不需要），可以用transform: skewY()配合容器的overflow: hidden：

.image-container {
  overflow: hidden;
  /* 给容器设置和图片一样的宽高 */
  width: 600px;
  height: 400px;
}

.skewed-image {
  transform: skewY(-5deg);
  /* 调整角度匹配需求 */
  width: 100%;
  height: 100%;
}

如果要保持内容正的话，只需给容器反向skew：容器transform: skewY(5deg)，图片transform: skewY(-5deg)，这样边缘倾斜的同时，图片内容不会变形。

方法3：SVG ClipPath #

如果需要极致的浏览器兼容性，或者要更复杂的倾斜形状，可以用SVG的裁剪路径：

<svg width="0" height="0">
  <clipPath id="imageClip">
    <polygon points="0 0, 100% 10%, 100% 100%, 0 90%" />
  </clipPath>
</svg>

<img src="你的原始图片路径" class="svg-clipped-image" />

然后在CSS里引用这个clipPath：

.svg-clipped-image {
  clip-path: url(#imageClip);
}

这种方法兼容性比纯CSS的clip-path更好，还能在SVG里精确调整形状坐标。

内容的提问来源于stack exchange，提问作者Mat_-_