如何在div末尾添加透明度0.2的三角形？三角形被背景遮挡求助

我希望实现如图所示的漏斗效果，但当前实现中，阶段之间的三角形会被下一阶段的背景遮挡，已耗时3小时仍未解决，恳请帮助。

解决方案 #

• 给三角形元素（或生成三角形的伪元素）设置更高的z-index值，确保其层级高于后续阶段的背景容器
• 确保三角形的定位为absolute时，其父容器设置position: relative，同时梳理清楚z-index的层级关系，让三角形处于当前阶段容器的上层且不被后续容器覆盖

示例CSS修改（适配你的组件结构）：

.sales-funnel__stage::after {
  /* 原有三角形样式 */
  position: absolute;
  bottom: -1rem;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 1.5rem solid transparent;
  border-right: 1.5rem solid transparent;
  border-top: 1rem solid inherit;
  /* 新增层级设置 */
  z-index: 10;
}

另外，检查后续阶段容器的z-index，避免其值高于当前阶段的三角形，确保堆叠顺序正确。

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