创建Chevron布局时伪元素前后白像素及横线问题解决求助

我正在制作Chevron布局，用于表格信息的筛选和可视化。当前遇到的问题是：主元素与其边框之间出现了白像素，我使用box-shadow实现hover状态下的元素填充效果，排查后发现根源是box-shadow的inset属性，但不知道具体解决方法，寻求大家的建议。

初始问题截图：

编辑1：解决锯齿边框但出现新问题 #

参考评论中的问题链接，我尝试在.li::after和.li::before上添加will-change: transform，成功解决了锯齿边框的问题，但元素中间又出现了一条细横线，虽然很细却十分显眼。

新问题截图：

编辑2：最终解决方案 #

最终通过设置高于背景的z-index解决了横线问题，特别感谢提供链接指引的朋友。这是一个已知的旧Bug，存在多种解决方案。

完整代码 #

CSS代码 #

:root {
  --width-funil: 50px;
  --width-tamTotal: calc(var(--width-funil) + 32px);
  --width-tamTotal2: calc(var(--width-funil) + 34px);
  --width-tamTotal3: calc(var(--width-funil) + 15px);
  --height-funil: 50px;
  --border-size: 1px;
  --lumenk: #F15E36;
  --border-color: grey;
  --cor-fundo: white;
}

.li {
  height: var(--height-funil);
  width: var(--width-funil);
  padding-left: 20px;
  background: var(--cor-fundo);
  color: black;
  display: inline-block;
  position: relative;
  margin-left: 20px;
  line-height: 50px;
  font-family: sans-serif;
  font-size: 15px;
  box-sizing: unset !important;
}

.li::before,
.li::after {
  content: '';
  left: -15px;
  position: absolute;
  height: 23px;
  width: var(--width-tamTotal);
  border-left: 2px solid var(--border-color);
  border-right: 2px solid var(--border-color);
  box-sizing: unset !important;
}

.li::before {
  border-top: 2px solid var(--border-color);
  transform-origin: 0% 0%;
  transform: skewX(30deg);
  top: 0;
  box-shadow: inset 0 8px 0 8px var(--cor-fundo), inset -6px 8px 0 8px var(--cor-fundo);
}

.li::after {
  border-bottom: 2px solid var(--border-color);
  transform-origin: 0% 100%;
  transform: skewX(-30deg);
  bottom: 0;
  box-shadow: inset 0 -8px 0 8px var(--cor-fundo), inset -6px -8px 0 8px var(--cor-fundo);
}

.li:hover {
  color: white;
  background-color: var(--lumenk);
}

.li:hover::before {
  color: white;
  box-shadow: inset 0 8px 0 8px var(--lumenk), inset -6px 8px 0 8px var(--lumenk);
}

.li:hover::after {
  color: white;
  box-shadow: inset 0 -8px 0 8px var(--lumenk), inset -6px -8px 0 8px var(--lumenk);
}


/* First and Last styles */

.li:first-of-type {
  left: -15px;
  box-shadow: 15px 0 0 0 var(--cor-fundo);
  border-left: 2px solid var(--border-color);
}

.li:first-of-type::before,
.li:first-of-type::after {
  left: -1px;
  width: var(--width-tamTotal2);
  border-left: 0;
}

.li:first-of-type:hover {
  color: white;
  box-shadow: 15px 0 0 0 var(--lumenk);
}

.li:last-of-type {
  left: 0px;
  width: var(--width-tamTotal3);
  box-shadow: inset -2px 0 0 0 var(--border-color), inset 0 -2px 0 0 var(--border-color), inset 0 2px 0 0 var(--border-color);
  border: 0;
}

.li:last-of-type::before,
.li:last-of-type::after {
  left: -15px;
  border-right: 0;
}

.li:last-of-type:hover {
  color: white;
  background: var(--lumenk);
}

.fa-solid {
  margin-right: 10px;
}

HTML代码 #

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css" integrity="sha512-SzlrxWUlpfuzQ+pcUCosxcglQRNAq/DZjVsC0lE40xsADsfeQoEypE+enwcOiGjk/bSuGGKHEyjSoQ1zVisanQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<div>
  <div class="li"><i class="fa-solid fa-file-lines"></i>200</div>
  <div class="li"><i class="fa-solid fa-file-circle-exclamation"></i>49</div>
  <div class="li"><i class="fa-solid fa-laptop-file"></i>38</div>
  <div class="li"><i class="fa-solid fa-file-signature"></i>25</div>
  <div class="li"><i class="fa-solid fa-file-invoice-dollar"></i>15</div>
</div>

内容的提问来源于stack exchange，提问作者Pedro da Silva Farias