如何用HTML/CSS实现类似mode.com示例的凹边框效果？

整体结构回顾 #

这个布局采用横向flex容器，包含四个子元素：左右两个侧边块，中间是一个纵向flex容器，里面包含上下两个div，通过视觉融合形成完整的异形结构。

核心：内凹圆角的实现方式 #

你没找到伪元素是因为这里用了径向渐变背景来模拟内凹效果，而非伪元素，具体逻辑如下：

• 左右侧边块设置外凸的border-radius，比如右侧块用border-radius: 0 24px 24px 0，左侧块反向设置，形成外凸的圆角边缘。
• 中间容器的上下两个div，分别在对应边缘添加径向渐变背景：
  • 中间顶部div在底部添加径向渐变，圆心设为底部中心，渐变从透明过渡到侧边块的背景色，半径和侧边块的圆角半径一致，刚好形成内凹的弧度。
  • 中间底部div则在顶部添加反向的径向渐变，实现顶部内凹。
• 通过background-size精准控制渐变的高度，确保内凹部分和侧边块的圆角完全对齐，再配合flex的高度对齐，实现视觉上的无缝衔接。

简化代码示例 #

/* 外层flex容器 */
.shape-container {
  display: flex;
  height: 220px;
}

/* 左右侧边元素 */
.side-panel {
  width: 90px;
  background-color: #1a2530;
}
/* 左侧侧边的外凸圆角 */
.side-panel.left {
  border-radius: 24px 0 0 24px;
}
/* 右侧侧边的外凸圆角 */
.side-panel.right {
  border-radius: 0 24px 24px 0;
}

/* 中间纵向容器 */
.middle-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* 中间顶部块：底部内凹 */
.middle-top {
  flex: 1;
  background-color: #f7f8fa;
  /* 径向渐变实现底部内凹 */
  background-image: radial-gradient(circle at bottom center, transparent 24px, #1a2530 24px);
  background-size: 100% 25px;
  background-repeat: no-repeat;
}

/* 中间底部块：顶部内凹 */
.middle-bottom {
  flex: 1;
  background-color: #f7f8fa;
  /* 径向渐变实现顶部内凹 */
  background-image: radial-gradient(circle at top center, transparent 24px, #1a2530 24px);
  background-size: 100% 25px;
  background-repeat: no-repeat;
}

这种方式的优势在于无需额外DOM元素或伪元素，仅通过背景渐变就能实现内凹效果，结构更简洁，响应式调整也更灵活。

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