如何用CSS绘制可响应select、hover事件的六边形组件？

直接用clip-path就能轻松实现可交互的六边形，比伪元素方案更简洁易维护，以下是完整实现代码：

HTML结构 #

<div class="hexagon">
  <span>示例内容</span>
</div>
<!-- 支持选中状态，给对应元素加selected类即可 -->
<div class="hexagon selected">
  <span>已选中</span>
</div>

CSS样式 #

.hexagon {
  /* 正六边形尺寸比例：高度 = 宽度 × √3/2 ≈ 宽度×1.1547 */
  width: 120px;
  height: 138px;
  background: #4285F4;
  /* 用polygon绘制正六边形路径 */
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  /* 内部内容居中布局 */
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  cursor: pointer;
  /* 状态变化添加平滑过渡 */
  transition: all 0.3s ease;
}

/* hover状态：修改背景色+轻微缩放效果 */
.hexagon:hover {
  background: #3367D6;
  transform: scale(1.05);
}

/* 选中状态（点击触发或通过JS添加selected类） */
.hexagon:active,
.hexagon.selected {
  background: #2952CC;
  box-shadow: 0 0 0 3px rgba(66, 133, 244, 0.3);
}

/* 内部内容排版适配 */
.hexagon span {
  text-align: center;
  padding: 0 15px;
  line-height: 1.4;
}

关于伪元素方案的问题 #

你之前用:before/:after失败，大概率是因为伪元素的事件响应和样式同步问题：

• 伪元素默认无法单独响应鼠标事件，即使开启pointer-events: auto，也会和主元素的事件冲突
• 要同时修改主元素和两个伪元素的样式，代码冗余且容易出现视觉错位

而clip-path方案直接作用于元素本身，所有交互状态都可以直接通过元素选择器控制，逻辑更清晰。

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