如何使用CSS实现图片右上角的三角形覆盖层？

嘿，我来帮你搞定这个三角形覆盖层的问题～你现在只能做出方形的话，其实有几种实用又简单的CSS方法可以实现，我给你详细拆解一下：

方法一：用clip-path（最直观好上手） #

clip-path就像给元素“剪造型”，能直接把方形覆盖层裁成三角形，代码特别简洁，而且灵活度超高。

给你个示例代码，你可以直接套进现有结构里改：

<div class="image-container">
  <img src="你的图片地址" alt="示例图片">
  <div class="triangle-overlay"></div>
</div>

.image-container {
  position: relative;
  width: 300px; /* 换成你图片的实际宽度 */
  height: 200px; /* 换成你图片的实际高度 */
  overflow: hidden;
}

.image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.triangle-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* 这里裁的是左上角→右上角→右下角的直角三角形，你可以按需改坐标 */
  clip-path: polygon(0 0, 100% 0, 100% 100%);
  background-color: rgba(0, 0, 0, 0.5); /* 半透明黑，也可以换成你想要的颜色 */
}

要是想换其他方向的三角形，调整polygon()里的三个坐标就行：

• 左下角→右下角→右上角：polygon(0 100%, 100% 100%, 100% 0)
• 左上角→左下角→右下角：polygon(0 0, 0 100%, 100% 100%)

方法二：利用CSS边框特性（老浏览器也兼容） #

这个是CSS的经典小技巧：当元素宽高设为0时，边框会变成三角形。兼容性拉满，适合需要适配老版本浏览器的场景。

示例代码：

<div class="image-container">
  <img src="你的图片地址" alt="示例图片">
  <div class="triangle-overlay"></div>
</div>

.image-container {
  position: relative;
  width: 300px;
  height: 200px;
  overflow: hidden;
}

.image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.triangle-overlay {
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 0;
  /* 边框宽度要对应图片的宽高，比如这里图片是300x200，就设border-top为200px，border-left为300px */
  border-top: 200px solid rgba(0, 0, 0, 0.5);
  border-left: 300px solid transparent; /* 透明边框用来“撑出”三角形形状 */
}

这个方法做出来的是右上角到左下角的直角三角形，想换方向的话，调整边框的方向（比如border-bottom、border-right）就行。

方法三：用线性渐变linear-gradient（不用额外元素） #

这个方法更省心，不需要单独加覆盖层元素，直接给图片容器加个伪元素，用渐变就能做出三角形效果。

示例代码：

<div class="image-container">
  <img src="你的图片地址" alt="示例图片">
</div>

.image-container {
  position: relative;
  width: 300px;
  height: 200px;
}

.image-container::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* 渐变方向是左上角到右下角，前50%透明，后50%半透明黑，刚好形成三角形 */
  background: linear-gradient(to bottom right, transparent 50%, rgba(0, 0, 0, 0.5) 50%);
}

.image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

你可以根据自己的需求挑合适的方法：clip-path最灵活，想做任何形状都可以；边框方法兼容性最好；渐变方法不用加额外元素，代码更清爽～

内容的提问来源于stack exchange，提问作者Ligorio Edwin Salgado Flores