如何用CSS为图片添加尖角效果？

AI 小北

2026-7-21

实现图片尖角效果的可行思路

你要的这种顶部圆角、底部带尖角的效果，border-radius确实没法实现，推荐用以下两种CSS方案：

方案1：用clip-path裁剪出自定义形状

这是最直接的方法，通过clip-path的path()或polygon()定义图片的显示区域，精准控制圆角和尖角的形状：

用SVG路径实现圆角+尖角

.img-wrapper {
  width: 200px;
  height: 200px;
}
.img-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 路径参数可调整：前两个C控制顶部左右圆角，中间L连接直角，最后一个L是底部尖角 */
  clip-path: path('M 40 0 C 0 0, 0 0, 0 40 L 0 160 L 100 200 L 200 160 L 200 40 C 200 0, 200 0, 160 0 Z');
}

<div class="img-wrapper">
  <img src="你的图片URL" alt="带尖角的图片">
</div>

你可以修改path()里的数值：比如把40改成其他数字调整圆角大小，修改100 200来移动尖角的位置，调整160来改变尖角上方的垂直高度。

简化版polygon（无圆角，仅尖角）

如果不需要顶部圆角，只用polygon()更简单：

img {
  clip-path: polygon(0 0, 100% 0, 100% 80%, 50% 100%, 0 80%);
}

方案2：伪元素模拟尖角（不裁剪图片）

如果你的图片下方背景是纯色，可以用容器的伪元素做尖角，避免裁剪图片内容：

.img-wrapper {
  width: 200px;
  height: 180px;
  border-radius: 40px 40px 0 0;
  overflow: hidden;
  position: relative;
  background: #fff; /* 设为页面背景色 */
}
.img-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.img-wrapper::after {
  content: "";
  position: absolute;
  bottom: -20px;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 40px;
  background: inherit;
  clip-path: polygon(50% 100%, 0 0, 100% 0);
}

这种方法适合不想裁剪图片的场景，调整伪元素的width、height和bottom值就能改变尖角的大小和突出程度。