如何实现带有阴影效果的三角形网页装饰块？

你遇到的问题是典型的border生成的三角形无法直接应用box-shadow——因为伪元素本身是矩形，box-shadow会作用于整个矩形而非可见的三角形部分。下面是三种实用的解决方法：

方法1：使用filter: drop-shadow()（推荐） #

drop-shadow滤镜会根据元素的实际可见像素形状生成阴影，完美适配border做的三角形。直接给伪元素或父元素添加该滤镜即可：

/* 主体容器 */
.triangle-container {
  position: relative;
  width: 200px;
  height: 160px;
  background: #ffffff;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15); /* 主体的阴影 */
}

/* 三角形伪元素 */
.triangle-container::before {
  content: "";
  position: absolute;
  bottom: -20px;
  left: 50%;
  transform: translateX(-50%);
  /* 生成三角形 */
  border: 10px solid transparent;
  border-top-color: #ffffff;
  /* 添加三角形阴影 */
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.15));
}

优点：实现简单，阴影效果自然，无需额外元素。

方法2：使用clip-path定义三角形 #

直接用clip-path将伪元素裁剪成三角形，此时元素本身就是三角形形状，可直接应用box-shadow：

.triangle-container {
  position: relative;
  width: 200px;
  height: 160px;
  background: #ffffff;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
}

.triangle-container::before {
  content: "";
  position: absolute;
  bottom: -20px;
  left: 50%;
  transform: translateX(-50%);
  width: 20px;
  height: 20px;
  background: #ffffff;
  /* 裁剪成等腰三角形 */
  clip-path: polygon(50% 100%, 0 0, 100% 0);
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.15);
}

优点：无需依赖滤镜，可灵活调整三角形形状，支持复杂多边形。

方法3：双三角形叠加模拟阴影 #

用两个三角形叠加，下方的深色三角形稍微偏移、放大，模拟阴影效果，适合需要兼容旧浏览器的场景：

.triangle-container {
  position: relative;
  width: 200px;
  height: 160px;
  background: #ffffff;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
}

/* 阴影三角形（下方） */
.triangle-container::before {
  content: "";
  position: absolute;
  bottom: -22px; /* 比主三角形低2px */
  left: 50%;
  transform: translateX(-50%);
  border: 11px solid transparent; /* 比主三角形大1px */
  border-top-color: rgba(0, 0, 0, 0.1);
}

/* 主三角形（上方） */
.triangle-container::after {
  content: "";
  position: absolute;
  bottom: -20px;
  left: 50%;
  transform: translateX(-50%);
  border: 10px solid transparent;
  border-top-color: #ffffff;
}

优点：兼容性好，无需CSS3滤镜或clip-path，缺点是阴影效果不如前两种自然，需要手动调整偏移和大小。

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