如何使用CSS制作中间带凹口的顶部边框？

完全可以用CSS替代图片实现这个效果，下面是完整的解决方案，包含中间凹口和两侧菱形的实现：

实现思路 #

1. 基础边框：通过容器的背景渐变实现左右两段实线边框，中间留空用于放置凹口
2. 中间凹口：用独立元素制作向下的弧形，同时保留边框线条
3. 两侧菱形：利用伪元素旋转正方形，并设置边框和背景色

完整代码 #

HTML结构 #

<div class="top-border">
  <div class="border-notch"></div>
</div>

CSS样式 #

/* 顶部边框容器 */
.top-border {
  position: relative;
  height: 2px;
  /* 线性渐变实现左右两段边框，中间透明区域对应凹口宽度 */
  background: linear-gradient(
    to right,
    #b29464 0%,
    #b29464 calc(50% - 20px),
    transparent calc(50% - 20px),
    transparent calc(50% + 20px),
    #b29464 calc(50% + 20px),
    #b29464 100%
  );
  margin: 30px 10px; /* 根据需求调整上下左右间距 */
}

/* 左侧菱形 */
.top-border::before {
  content: '';
  position: absolute;
  top: -5px; /* 调整位置让菱形垂直居中于边框 */
  left: 0;
  width: 10px;
  height: 10px;
  background-color: #ffffff;
  border: 2px solid #b29464;
  transform: rotate(45deg);
}

/* 右侧菱形 */
.top-border::after {
  content: '';
  position: absolute;
  top: -5px;
  right: 0;
  width: 10px;
  height: 10px;
  background-color: #ffffff;
  border: 2px solid #b29464;
  transform: rotate(45deg);
}

/* 中间凹口 */
.border-notch {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 12px;
  background-color: #ffffff; /* 颜色需与页面背景色一致 */
  border-bottom: 2px solid #b29464;
  border-radius: 0 0 50% 50%; /* 实现弧形凹口 */
}

可调整参数 #

• 修改#b29464可以替换边框和菱形的边框颜色
• 调整calc(50% - 20px)和calc(50% + 20px)中的20px，可以改变凹口的宽度
• 修改border-radius的数值可以调整凹口的弧度
• 调整菱形的width和height可以改变菱形大小

内容的提问来源于stack exchange，提问作者Matías Cánepa