如何用CSS为矩形外侧添加曲线？无法修改HTML结构的实现方案

完全可以通过纯CSS实现你想要的顶部导航向上曲线、底部导航向下曲线的效果，不需要修改任何HTML结构。下面是具体的实现方案：

核心思路 #

利用CSS伪元素（:before/:after）结合**径向渐变（radial-gradient）**创建曲线形状，通过定位伪元素到导航栏边缘，模拟出曲线效果，同时保证导航栏内容不会被遮挡。

完整CSS代码 #

.navbar-top {
  background-color: blue;
  position: relative;
  /* 给底部曲线留出空间，避免遮挡下方内容 */
  margin-bottom: 25px;
  /* 确保导航内容不会被曲线覆盖 */
  padding-bottom: 10px;
}

/* 顶部导航底部的向上曲线 */
.navbar-top:after {
  content: "";
  position: absolute;
  bottom: -25px;
  left: 0;
  width: 100%;
  height: 25px;
  /* 径向渐变创建半圆曲线，颜色与导航栏背景一致 */
  background: radial-gradient(ellipse at center, blue 50%, transparent 51%);
  background-size: 100% 100%;
}

.navbar-bottom {
  background-color: red;
  position: relative;
  /* 给顶部曲线留出空间，避免遮挡上方内容 */
  margin-top: 25px;
  /* 确保导航内容不会被曲线覆盖 */
  padding-top: 10px;
}

/* 底部导航顶部的向下曲线 */
.navbar-bottom:before {
  content: "";
  position: absolute;
  top: -25px;
  left: 0;
  width: 100%;
  height: 25px;
  /* 径向渐变创建半圆曲线，颜色与导航栏背景一致 */
  background: radial-gradient(ellipse at center, red 50%, transparent 51%);
  background-size: 100% 100%;
}

/* 修复fixed-bottom的定位问题 */
.navbar-bottom.fixed-bottom {
  margin-top: 0;
  top: auto;
  bottom: 0;
}
.navbar-bottom.fixed-bottom:before {
  bottom: auto;
  top: -25px;
}

效果说明 #

• 顶部导航（.navbar-top）：通过after伪元素在底部创建向上凸起的半圆曲线，margin-bottom确保下方内容不会被遮挡。
• 底部固定导航（.navbar-bottom.fixed-bottom）：通过before伪元素在顶部创建向下凸起的半圆曲线，调整定位确保曲线显示在导航上方，不影响页面内容。
• 你可以通过调整height值（当前为25px）改变曲线弧度大小，数值越大曲线越明显。

兼容性 #

该方案兼容所有现代浏览器（Chrome、Firefox、Safari、Edge），完全符合你无法修改HTML结构的需求。

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