如何实现底部带向下箭头的全屏宽度区块？

下面给你三种实用的CSS实现方案，直接基于你提供的HTML结构修改即可：

方案一：CSS clip-path 裁剪形状 #

这种方法直接通过裁剪区块底部来实现箭头效果，代码简洁，现代浏览器兼容性较好。

<section class="arrow-section">
  <div>
    <p>sample text</p>
  </div>
</section>

.arrow-section {
  width: 100vw;
  margin-left: calc(-50vw + 50%); /* 突破父容器限制，实现真正全屏 */
  background: #2c3e50;
  color: white;
  padding: 4rem 2rem;
  /* 裁剪路径：底部中间剪出向下箭头 */
  clip-path: polygon(0 0, 100% 0, 100% 85%, 55% 85%, 50% 100%, 45% 85%, 0 85%);
}

.arrow-section div {
  max-width: 1200px;
  margin: 0 auto; /* 内部内容居中 */
}

调整clip-path里的百分比可修改箭头样式：

• 85%：控制箭头上方的水平高度，数值越小箭头越长
• 55%/45%：控制箭头宽度，数值越接近50%，箭头越窄

方案二：伪元素实现箭头 #

这种方法不改变区块本身形状，通过伪元素在底部添加箭头，适合保留区块完整背景（比如渐变背景）的场景。

.arrow-section {
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  background: #3498db;
  color: white;
  padding: 4rem 2rem;
  position: relative;
}

.arrow-section div {
  max-width: 1200px;
  margin: 0 auto;
}

/* 底部箭头伪元素 */
.arrow-section::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%) translateY(100%);
  /* 边框实现三角形箭头 */
  width: 0;
  height: 0;
  border-left: 2rem solid transparent;
  border-right: 2rem solid transparent;
  border-top: 2rem solid #3498db; /* 颜色与区块背景一致 */
}

修改边框数值可调整箭头大小，border-top颜色需和区块背景色保持统一。

方案三：SVG背景实现 #

如果需要更复杂的箭头形状，或是更好的缩放兼容性，可使用SVG作为背景图。

.arrow-section {
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  background: linear-gradient(#e74c3c, #c0392b);
  color: white;
  padding: 4rem 2rem;
  padding-bottom: 4rem; /* 给SVG箭头预留空间 */
  /* 内联SVG作为底部背景 */
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 20"><path d="M0,0 L100,0 L100,15 L55,15 L50,20 L45,15 L0,15 Z" fill="%23c0392b"/></svg>');
  background-repeat: no-repeat;
  background-position: bottom center;
  background-size: 100% auto;
}

.arrow-section div {
  max-width: 1200px;
  margin: 0 auto;
}

修改SVG的path路径可自定义箭头形状，fill属性颜色需匹配区块底部背景色。

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