如何使用CSS实现指定形状及div内圆形背景裁剪效果

一、图示目标形状实现 #

你提到的图示为单侧带内凹半圆的矩形标签，这里提供两种可直接落地的实现方案：

• 方案1：clip-path实现（代码最简，现代浏览器全兼容）
  直接用路径定义裁剪区域即可，可根据实际需求调整尺寸、半圆位置和半径参数：

.target-shape {
  width: 200px;
  height: 80px;
  background: #2563eb;
  /* 路径参数可根据实际尺寸按需调整 */
  clip-path: path('M0,0 H160 A20,20 0 0 1 180,0 H200 V80 H0 Z');
}

• 方案2：伪元素实现（兼容更低版本浏览器）
  通过和父级背景同色的绝对定位伪元素覆盖出内凹效果，适合需要兼容IE11的场景：

.target-shape {
  position: relative;
  width: 200px;
  height: 80px;
  background: #2563eb;
  overflow: hidden;
}
.target-shape::after {
  content: '';
  position: absolute;
  right: 0;
  top: -20px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  /* 颜色和形状所在页面的背景色保持一致即可 */
  background: #fff;
}

二、div内圆形背景裁剪实现 #

根据不同使用场景有三种常用方案：

• 方案1：基础圆角裁剪（最通用）
  给div设置圆角+溢出隐藏，背景、子元素都会被统一裁剪为圆形：

.circle-container {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  overflow: hidden;
  background: url(你的背景资源地址) center / cover no-repeat;
}

• 方案2：clip-path自定义裁剪
  适合需要动态调整圆形位置、半径的场景，灵活度更高：

.circle-container {
  width: 300px;
  height: 200px;
  background: url(你的背景资源地址) center / cover no-repeat;
  /* circle参数规则：半径 at 圆心X坐标 圆心Y坐标 */
  clip-path: circle(80px at center);
}

• 方案3：仅裁剪背景不限制子元素
  如果只需要背景裁剪为圆形，子元素可以超出圆形区域显示，用mask属性实现：

.circle-container {
  width: 300px;
  height: 200px;
  background: url(你的背景资源地址) center / cover no-repeat;
  /* 径向渐变控制显示区域，黑色为显示、透明为隐藏 */
  mask: radial-gradient(circle at center, black 80px, transparent 80px);
  -webkit-mask: radial-gradient(circle at center, black 80px, transparent 80px);
}

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