如何实现带半圆裁剪的指示器？clip-path路径参数求助

首先，你用的clip(...)是旧版CSS裁剪语法，现在更推荐用clip-path: path()来实现自定义形状的裁剪，它能灵活画出带圆弧缺口的路径，刚好满足你要透出后方条带的需求。

直接可用的实现代码 #

/* 指示器容器 */
.indicator {
  width: 120px;
  height: 40px;
  background-color: #ccc;
  /* 核心裁剪路径 */
  clip-path: path('M 0 0 L 120 0 L 120 40 L 65 40 A 15 15 0 0 0 55 40 L 0 40 Z');
  position: relative;
}

/* 后方的条带元素 */
.stripe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(45deg, #ff4444, #ff4444 10px, #ffffff 10px, #ffffff 20px);
  z-index: -1;
}

<div class="indicator">
  <div class="stripe"></div>
  <!-- 指示器内的其他内容 -->
</div>

裁剪路径参数详解 #

上面的path()字符串里的每个指令都对应路径的绘制逻辑，逐个拆解：

• M 0 0：Move to，把画笔移动到坐标(0,0)，也就是矩形的左上角起点
• L 120 0：Line to，从当前点画直线到(120,0)，也就是矩形右上角
• L 120 40：继续画直线到(120,40)，矩形右下角
• L 65 40：画直线到(65,40)，这是圆弧的右侧起始点
• A 15 15 0 0 0 55 40：Arc to，画圆弧，参数依次是：
  • 15 15：圆弧的X轴半径和Y轴半径（这里是正圆，所以两个值相等）
  • 0：圆弧的旋转角度（0表示不旋转）
  • 0：大弧标志（0表示用小圆弧，1则会画更大的那一段弧）
  • 0：扫掠方向（0表示逆时针画弧，1是顺时针）
  • 55 40：圆弧的终点坐标（和左侧起点对称，形成底部中间的缺口）
• L 0 40：从圆弧终点画直线到(0,40)，矩形左下角
• Z：Close path，闭合路径，自动连回起点(0,0)

动态调整的优化方案 #

如果需要随时修改指示器尺寸或圆弧大小，可以用CSS变量来统一管理参数，这样不用手动改路径里的数值：

.indicator {
  --indicator-width: 120px;
  --indicator-height: 40px;
  --arc-radius: 15px;
  
  width: var(--indicator-width);
  height: var(--indicator-height);
  background-color: #ccc;
  clip-path: path('M 0 0 L var(--indicator-width) 0 L var(--indicator-width) var(--indicator-height) L calc(var(--indicator-width)/2 + var(--arc-radius)) var(--indicator-height) A var(--arc-radius) var(--arc-radius) 0 0 0 calc(var(--indicator-width)/2 - var(--arc-radius)) var(--indicator-height) L 0 var(--indicator-height) Z');
  position: relative;
}

只要修改--indicator-width、--indicator-height、--arc-radius这三个变量，就能快速调整指示器的形状。

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