如何为HTML页面Hero区域底部添加凹形边框？

下面是几种简单可行的方法，帮你把Hero区域的直线底部改成Netflix风格的凹形边框：

方法1：使用CSS clip-path（最简洁） #

直接通过clip-path裁剪Hero容器的形状，代码简单直观：

.hero-section {
  /* 你的原有样式（比如背景、高度等） */
  position: relative;
  background-color: #000;
  height: 60vh;
  /* 核心代码：多边形裁剪实现凹形 */
  clip-path: polygon(0 0, 100% 0, 100% 90%, 50% 100%, 0 90%);
}

调整说明：

• 数值90%和100%可以修改：90%控制凹形的起始高度，数值越小凹得越深；50%是凹形的最低点位置，保持在中间即可。
• 这种方法会直接裁剪Hero的所有内容（包括背景图），如果Hero内部有其他元素，会一起被裁剪。

方法2：伪元素+圆角（兼容性更好） #

如果需要兼容旧版浏览器，用伪元素做一个半圆覆盖在Hero底部，模拟凹形效果：

.hero-section {
  position: relative;
  background-color: #000;
  height: 60vh;
  overflow: hidden; /* 隐藏伪元素超出部分 */
}

.hero-section::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 80px; /* 控制凹形的高度 */
  background-color: #141414; /* 要和Hero下方页面的背景色一致 */
  border-radius: 50% 50% 0 0; /* 上半圆 */
  transform: translateY(50%); /* 把半圆下半部分藏到Hero外面 */
}

调整说明：

• 修改height数值可以控制凹形的深度，数值越大凹得越深。
• 务必保证background-color和页面主体背景色完全匹配，否则会出现明显的色块断层。

方法3：SVG背景（自定义形状更灵活） #

如果需要更精细的凹形曲线，用SVG做背景图，能实现和Netflix完全一致的弧度：

.hero-section {
  background: #000 url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 80"><path fill="%23141414" d="M0,64L80,69.3C160,75,320,85,480,80C640,75,800,53,960,48C1120,43,1280,53,1360,58.7L1440,64L1440,80L1360,80C1280,80,1120,80,960,80C800,80,640,80,480,80C320,80,160,80,80,80L0,80Z"/></svg>') no-repeat bottom center;
  background-size: 100% auto;
  height: 60vh;
}

调整说明：

• 可以在线修改SVG的path参数来调整曲线，完全贴合Netflix的样式。
• 把SVG的fill值改成你页面的背景色即可。

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