如何创建倒圆角（Border Radius Upside Down）并应用到页脚？

可以用两种简单的CSS方案实现这种顶部向内凹的倒圆角效果，具体代码如下：

方案一：伪元素定位法 #

适合需要保留页脚边框或复杂背景的场景

HTML结构

<footer class="custom-footer">
  <p>这里是页脚内容</p>
</footer>

CSS样式

/* 页面背景色，需和伪元素背景保持一致 */
body {
  background-color: #f5f5f5;
  margin: 0;
  padding: 0;
}

.custom-footer {
  position: relative;
  background-color: #2c3e50;
  color: white;
  padding: 2rem;
  margin-top: 2rem;
}

/* 左侧倒圆角伪元素 */
.custom-footer::before {
  content: '';
  position: absolute;
  top: -20px;
  left: 0;
  width: 40px;
  height: 40px;
  background-color: #f5f5f5;
  border-bottom-right-radius: 40px;
}

/* 右侧倒圆角伪元素 */
.custom-footer::after {
  content: '';
  position: absolute;
  top: -20px;
  right: 0;
  width: 40px;
  height: 40px;
  background-color: #f5f5f5;
  border-bottom-left-radius: 40px;
}

方案二：clip-path路径法 #

无需额外伪元素，代码更简洁

CSS样式

.custom-footer {
  background-color: #2c3e50;
  color: white;
  padding: 2rem;
  margin-top: 2rem;
  /* 调整数值可改变倒圆角大小，20px为圆角半径 */
  clip-path: polygon(0 20px, 20px 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 0 100%);
}

说明 #

• 方案一中，修改伪元素的width/height和border-radius数值，可调整倒圆角的尺寸；
• 方案二中，直接修改clip-path里的20px数值，就能改变圆角大小；
• 两种方案都需要保证页脚外的背景色和伪元素/路径切割后的填充色一致，才能呈现“凹进去”的视觉效果。

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