如何使用CSS在图片底部创建三角形形状

你可以通过CSS实现、静态图片编辑两种常用路径实现该效果，以下是可直接复用的操作说明：

方法1：CSS clip-path 裁切（网页场景最简便） #

直接对图片元素做路径裁切，不需要额外添加DOM节点，代码量最少：

.triangle-bottom-img {
  /* 裁切路径按顺时针坐标定义，底部中间位置凹出等腰三角形 */
  clip-path: polygon(0 0, 100% 0, 100% 85%, 50% 100%, 0 85%);
  width: 100%;
  height: auto;
}

可自行调整85%、100%两个数值，控制三角形的高度和倾斜角度。

方法2：CSS 伪元素叠加（网页场景兼容性更好） #

如果需要兼容低版本浏览器，可以用父容器包裹图片，底部叠加和页面背景色一致的三角形实现视觉效果：

<div class="img-wrap">
  <img src="你的图片地址" alt="图片描述">
</div>

.img-wrap {
  position: relative;
  display: inline-block;
  font-size: 0;
}
.img-wrap::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 0;
  /* 左右边框撑满宽度，上边框透明，左右边框颜色和页面背景一致 */
  border-left: 50vw solid #ffffff;
  border-right: 50vw solid #ffffff;
  border-top: 60px solid transparent;
}

注意：代码里的#ffffff要替换成你页面实际的背景色，调整border-top的数值即可修改三角形高度。

方法3：本地编辑图片（静态图场景） #

如果只需要修改图片文件本身，不需要网页动态实现，可以用PS、Canva等修图工具操作：

• 新建和图片等宽的等腰三角形，填充和你需要的背景一致的颜色
• 把三角形对齐到图片底部居中位置，导出新图即可

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