如何实现六边形Carousel指示器？修复非激活状态显示异常

问题根源在于直接用border实现六边形边框时，元素内部的内容区域为正方形，配合clip-path裁剪后，透明的内容区域会透出背景，形成视觉上的内部正方形。同时需要完全重置Bootstrap轮播指示器按钮的默认样式。

以下是修正后的CSS代码：

#section-testimonials .carousel-indicators {
  bottom: 15px !important;
  margin-bottom: unset !important;
}

#section-testimonials .carousel .carousel-indicators button {
  display: inline-block;
  background-color: transparent;
  border: none; /* 重置默认边框 */
  width: 20px; /* 正六边形宽高比为 2:√3，这里设宽20px，高≈17px */
  height: 17px;
  opacity: 1;
  /* 适配正六边形的裁剪路径 */
  -webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  /* 用内部阴影模拟六边形边框 */
  box-shadow: inset 0 0 0 2px red;
}

#section-testimonials .carousel .carousel-indicators button.active {
  background-color: red;
  box-shadow: none; /* 激活状态移除阴影，用背景色填充整个六边形 */
}

HTML代码无需修改，保持你原有的结构即可。

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