如何用HTML、CSS实现背景Div内部弧形及指定section背景样式？

嘿，我来帮你搞定这个内部弧形背景的需求！下面给你几种实用的方案，结合你提供的示例代码修改，你可以直接上手测试~

方案一：伪元素 + border-radius（适合单一边内凹） #

如果你的目标是在容器某一边（比如底部）做出内凹弧形，这个方法最简单。原理是用一个伪元素覆盖在容器边缘，通过圆角模拟内凹效果，还不会影响容器里的内容。

修改后的完整代码：

<style>
.bg{
  width: 400px;
  height: 200px;
  padding: 20px;
  text-align: center;
  border: 1px solid #000;
  background: red;
  color: #fff;
  display: flex;
  position: relative; /* 让伪元素相对容器定位 */
  overflow: hidden; /* 裁剪掉超出容器的伪元素部分 */
}
.bg p{
  text-align: center;
  margin: auto;
  font-size: 36px;
  z-index: 1; /* 确保文字在伪元素上方，不被遮挡 */
}
/* 底部内凹弧形的伪元素 */
.bg::after{
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 40px; /* 控制弧形的高度，数值越大弧形越明显 */
  background: #fff; /* 这里用页面的背景色，模拟出背景被挖空的内凹感 */
  border-radius: 50% 50% 0 0; /* 顶部两个圆角，形成向上的弧形 */
}
</style>

<div class="bg">
  <p>Section Content</p>
</div>

你可以调整伪元素的height和border-radius数值，来匹配你想要的弧形大小和弧度。

方案二：clip-path（自定义任意弧形） #

如果需要更复杂的内凹形状（比如多个内凹点、不规则弧形），CSS的clip-path属性就非常好用，它能精确裁剪元素的显示区域。

比如实现底部中间内凹的弧形，代码如下：

<style>
.bg{
  width: 400px;
  height: 200px;
  padding: 20px;
  text-align: center;
  border: 1px solid #000;
  background: red;
  color: #fff;
  display: flex;
  /* 自定义裁剪路径：底部中间内凹 */
  clip-path: polygon(0 0, 100% 0, 100% 80%, 70% 100%, 30% 100%, 0 80%);
}
.bg p{
  text-align: center;
  margin: auto;
  font-size: 36px;
}
</style>

<div class="bg">
  <p>Section Content</p>
</div>

解释一下这个路径：polygon()里的每一组数值代表一个坐标点，70% 100%和30% 100%这两个点就是内凹的关键，调整这两个点的百分比（比如改成60% 100%和40% 100%），就能改变内凹的宽度和深度。

特殊需求：背景内凹圆角（边框直角） #

如果你的需求是容器边框是直角，但背景是内凹圆角，那可以用background-clip属性实现，代码示例：

<style>
.bg{
  width: 400px;
  height: 200px;
  padding: 20px;
  text-align: center;
  border: 1px solid #000;
  background: red;
  color: #fff;
  display: flex;
  border-radius: 20px; /* 内凹圆角的大小 */
  background-clip: padding-box; /* 让背景只在padding区域显示，形成内凹效果 */
}
.bg p{
  text-align: center;
  margin: auto;
  font-size: 36px;
}
</style>

<div class="bg">
  <p>Section Content</p>
</div>

这种效果看起来像是背景被挖了四个圆角，而边框保持直角。

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