css实现空心三角形

### 使用CSS创建空心三角形

要创建一个空心三角形，可以利用伪元素 `::before` 和 `::after` 来实现。通过设置不同的边框样式来形成三角形的效果。

.hollow-triangle {
  position: relative;
  width: 0;
  height: 0;
}

.hollow-triangle::before,
.hollow-triangle::after {
  content: '';
  position: absolute;
  border-style: solid;
}

.hollow-triangle::before {
  top: 0;
  left: 5px; /* 调整位置 */
  border-width: 30px;
  border-color: black transparent transparent transparent;
}

.hollow-triangle::after {
  top: 8px; /* 控制内层三角形的位置 */
  left: 7px; /* 控制内层三角形的位置 */
  border-width: 26px;
  border-color: white transparent transparent transparent;
}

上述代码片段展示了如何使用两个重叠的实心三角形模拟出空心效果。外部较大的黑色三角形由 `.hollow-triangle::before` 定义，而内部较小的白色三角形则由 `.hollow-triangle::after` 创建[^1]。

为了确保图像能够正常渲染并显示预期形状，在实际应用中应当测试不同浏览器下的兼容性和表现一致性。如果遇到无法呈现的情况，则应跳转到备用方案处理。