如何用HTML/CSS为标题标签实现如图所示的特殊背景效果？

问题描述 #

我想要为标题标签制作如上图所示的背景效果，请问该如何实现？

我尝试过使用clip-path以及SVG path，但都没有得到想要的效果。希望有人能指点一二，谢谢！

我的尝试代码：

/* First try*/
.splash {
  background-color: #f5e2d1;
  clip-path: ellipse(75% 23% at 53% 30%);
  padding: 10px;
}


/* Second try, didn't quite understand this one and tried playing with the numbers but didn't get the shape i want */
.splash {
  background-color: #f5e2d1;
  clip-path: path('M50 0 C20 20, 20 70, 50 50, 80 70, 80 20, 50 0 Z');
  padding: 10px;
}

<div class="splash">
  <h3 class="clipped">Education</h3>
</div>

解决方案 #

方案一：使用border-radius（简单兼容好）

如果你的目标效果是顶部平直、底部两侧弧形，直接用border-radius就能快速实现，兼容性也更好：

.splash {
  background-color: #f5e2d1;
  /* 调整内边距适配文字大小 */
  padding: 8px 20px;
  /* 设置底部左右圆角，数值越大弧形越明显 */
  border-bottom-left-radius: 30px;
  border-bottom-right-radius: 30px;
  /* 让背景只包裹文字宽度，不占满整行 */
  display: inline-block;
}

<div class="splash">
  <h3>Education</h3>
</div>

方案二：使用clip-path: path()（精准定制形状）

如果需要更复杂的弧形（比如左右两侧向内凹、底部中间凸起），可以用自定义路径来绘制，调整路径参数就能匹配你想要的效果：

.splash {
  background-color: #f5e2d1;
  padding: 10px 22px;
  display: inline-block;
  /* 路径解析：顶部平直，左右下弯，底部中间凸起 */
  clip-path: path('M0 0 L100% 0 L100% 45% Q50% 100%, 0 45% Z');
}

参数说明：

• M0 0：起点为左上角
• L100% 0：绘制顶部直线到右上角
• L100% 45%：从右上角向下画到右侧45%高度处
• Q50% 100%, 0 45%：用二次贝塞尔曲线连接右侧45%高度处到左侧45%高度处，控制点在底部中间(50%,100%)，形成底部凸起的弧形
• Z：闭合路径

你可以调整45%和100%这些数值，来微调弧形的弯曲程度和高度。

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