如何使用div创建交叉弧形盒子？求可行解决方案

你当前用border-radius只能做出普通圆角矩形，要达成图中的交叉弧形（左右两端带对角向内凹的弧形），可以用以下两种方法：

方法一：伪元素 + 径向渐变（兼容性好） #

利用伪元素和径向渐变模拟两端的弧形缺口，适配绝大多数浏览器：

<div class="curved-box"></div>

.curved-box {
  width: 300px;
  height: 50px;
  background-color: #EFB046;
  position: relative;
  overflow: hidden; /* 隐藏伪元素超出部分 */
}

/* 左侧弧形缺口 */
.curved-box::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 40px;
  height: 100%;
  /* 径向渐变：左侧中心为原点，20px内透明，外部用背景色填充 */
  background: radial-gradient(circle at left center, transparent 20px, #ffffff 20px);
}

/* 右侧弧形缺口 */
.curved-box::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  width: 40px;
  height: 100%;
  background: radial-gradient(circle at right center, transparent 20px, #ffffff 20px);
}

注意：把#ffffff替换成盒子所在容器的背景色，缺口效果才会自然。

方法二：clip-path 路径裁剪（代码简洁） #

通过自定义多边形路径直接裁剪出弧形效果，代码更精简，但旧版浏览器（如IE）不支持：

<div class="curved-box"></div>

.curved-box {
  width: 300px;
  height: 50px;
  background-color: #EFB046;
  /* 多边形路径，数值对应弧形大小，可按需调整 */
  clip-path: polygon(
    20px 0,
    calc(100% - 20px) 0,
    100% 20px,
    100% calc(100% - 20px),
    calc(100% - 20px) 100%,
    20px 100%,
    0 calc(100% - 20px),
    0 20px
  );
}

调整提示 #

两种方案里的20px是控制弧形大小的关键数值，你可以根据需求修改，直到匹配图中的效果。

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