如何用CSS实现带圆角边框阴影的自定义箭头形状响应式面包屑

完全可以用CSS实现你要的效果，不用clip-path，通过伪元素+倾斜变换就能解决边框、阴影和间距问题，同时支持宽高调整。下面是具体实现方案：

核心思路 #

用主元素承载文本和左侧圆角边框，通过伪元素生成倾斜的箭头部分，拼接在主元素右侧，两者共享相同的背景、边框和阴影，确保视觉连贯且无间距。

完整代码 #

HTML结构 #

<div class="breadcrumb">
  <div class="breadcrumb-item">首页</div>
  <div class="breadcrumb-item">产品中心</div>
  <div class="breadcrumb-item">数码产品</div>
  <div class="breadcrumb-item active">智能手机</div>
</div>

CSS样式 #

/* 面包屑容器：flex布局消除间隙 */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 0;
}

/* 面包屑项基础样式 */
.breadcrumb-item {
  position: relative;
  /* 内边距+高度控制整体尺寸，可自由调整 */
  padding: 8px 20px 8px 24px;
  height: 36px;
  /* 宽度可手动设置或自适应 */
  /* width: 120px; */
  background: #fff;
  border: 1px solid #BBBCC4;
  border-right: none; /* 右侧边框交给伪元素处理 */
  border-radius: 4px 0 0 4px;
  box-shadow: 0 1px 2px 0 #37415114;
  font-size: 14px;
  color: #333;
  display: flex;
  align-items: center;
}

/* 箭头部分：倾斜伪元素实现 */
.breadcrumb-item::after {
  content: '';
  position: absolute;
  top: -1px; /* 对齐主元素上边框 */
  right: -18px; /* 控制箭头突出宽度 */
  width: 36px;
  height: calc(100% + 2px); /* 覆盖主元素上下边框 */
  background: #fff;
  border: 1px solid #BBBCC4;
  border-left: none;
  border-radius: 0 4px 4px 0;
  transform: skewX(-30deg); /* 倾斜角度，调整箭头尖锐度 */
  box-shadow: 0 1px 2px 0 #37415114;
  z-index: -1; /* 确保文本在箭头上方 */
}

/* 最后一项不需要箭头，恢复完整边框和圆角 */
.breadcrumb-item:last-child {
  border-right: 1px solid #BBBCC4;
  border-radius: 4px;
}

.breadcrumb-item:last-child::after {
  display: none;
}

/* 可选：激活状态样式 */
.breadcrumb-item.active {
  background: #f5f5f5;
  color: #165DFF;
}

关键细节说明 #

1. 消除1px间距：容器用flex且gap:0，伪元素通过top:-1px和height:calc(100% + 2px)完全贴合主元素边框，避免错位。
2. 边框与阴影连贯：主元素和伪元素使用相同的边框色、阴影参数，分别控制各自的边框显示（主元素隐藏右边框，伪元素隐藏左边框），视觉上形成完整边框。
3. 宽高调整：直接修改.breadcrumb-item的height、padding或width即可微调尺寸，灵活适配需求。
4. 圆角处理：主元素设置左侧圆角，伪元素设置右侧圆角，最后一项恢复完整的4px圆角。

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