如何创建带指针形状的按钮组并实现指定hover效果

以下是实现你需求的完整代码，包含指针形状和匹配示例的hover灰色样式：

<div class="btngroup">
  <button type="button" class="btn">Organization</button>
  <button type="button" class="btn">Project</button>
  <button type="button" class="btn">Applications</button>
</div>

<style>
/* 按钮组容器：用flex实现按钮紧密并排 */
.btngroup {
  display: flex;
  align-items: center;
  gap: 0;
}

/* 按钮基础样式 */
.btn {
  position: relative;
  padding: 8px 24px 8px 16px;
  border: none;
  background-color: #fff;
  color: #333;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s ease;
}

/* 非首个按钮的左侧指针 */
.btn:not(:first-child)::before {
  content: '';
  position: absolute;
  left: -10px;
  top: 0;
  border-top: 18px solid transparent;
  border-bottom: 18px solid transparent;
  border-left: 10px solid #fff;
  transition: border-left-color 0.3s ease;
}

/* 按钮右侧指针 */
.btn::after {
  content: '';
  position: absolute;
  right: -10px;
  top: 0;
  border-top: 18px solid transparent;
  border-bottom: 18px solid transparent;
  border-left: 10px solid #fff;
  transition: border-left-color 0.3s ease;
}

/* hover状态：匹配示例中的灰色样式 */
.btn:hover {
  background-color: #e0e0e0;
}

.btn:hover::before,
.btn:hover::after {
  border-left-color: #e0e0e0;
}

/* 隐藏最后一个按钮的右侧指针 */
.btn:last-child::after {
  display: none;
}
</style>

关键实现细节： #

• 用flex布局让按钮无间距排列，保证指针形状精准衔接
• 借助CSS边框属性绘制三角形指针，通过伪元素::before/::after添加到按钮两侧
• 过渡动画让hover状态的颜色变化更平滑自然
• 最后一个按钮隐藏右侧指针，避免出现多余的形状

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