使用CSS Polygon Clip Path如何设置超出100%高度的点位？

你的问题核心在于clip-path的百分比坐标是基于元素自身边界框计算的，超出元素边界的顶点会被直接裁剪——因为元素本身没有预留足够空间来承载这部分形状。以下是两种实用的解决办法：

方法一：扩展元素空间，调整clip-path坐标 #

给元素添加底部内边距，预留箭头的显示空间，再对应调整clip-path的坐标点，让箭头落在元素的内边距区域内：

.child {
  width: 100%;
  min-height: 90px;
  padding-bottom: 10px; /* 预留箭头的高度空间 */
  clip-path: polygon(
      0 0,
      40% 0,
      50% 20%,
      60% 0,
      100% 0,
      100% calc(100% - 10px),
      60% calc(100% - 10px),
      50% 100%,
      40% calc(100% - 10px),
      0 calc(100% - 10px)
  );
}

调整后箭头会落在元素内边距区域，不会被裁剪，同时元素整体视觉高度仍符合需求。

方法二：用伪元素单独绘制底部箭头 #

如果不想修改原元素的内边距布局，可以通过伪元素实现底部箭头，彻底避开clip-path的边界限制：

.child {
  width: 100%;
  min-height: 90px;
  position: relative;
  /* 仅用clip-path实现顶部箭头 */
  clip-path: polygon(
      0 0,
      40% 0,
      50% 20%,
      60% 0,
      100% 0,
      100% 100%,
      0 100%
  );
}

.child::after {
  content: '';
  position: absolute;
  bottom: -10px; /* 让箭头超出元素底部 */
  left: 50%;
  transform: translateX(-50%);
  width: 20%; /* 和顶部箭头宽度匹配 */
  height: 10px;
  background: inherit; /* 继承父元素背景色 */
  clip-path: polygon(0 0, 50% 100%, 100% 0);
}

这种方式将顶部、底部箭头分开处理，底部箭头通过伪元素定位超出原元素，布局灵活性更高。

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