如何实现斜角边框导航li标签hover时背景完全填充效果

你当前实现的问题在于，斜角分隔线是通过绝对定位在li外部的旋转伪元素实现的，li本身是标准矩形，hover时的矩形背景自然无法覆盖斜角处的空隙。不需要更换整体实现思路，调整样式即可完成需求。

修改后代码 #

CSS

section ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: left;
  list-style-type: none;
  margin: .5em 1em;
  background: #000; /* 分隔线颜色和此处保持一致即可 */
  gap: 2px; /* 控制分隔线宽度 */
  padding: 2px 0;
}
li {
  margin: 0;
  position: relative;
  padding: 0.3em 1em;
  cursor: pointer;
  background: #fff;
  transition: all 0.2s ease;
}
/* 匹配原设计20度斜角的裁剪规则，可自行调整百分比修改斜度 */
li:nth-child(2n+1) {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 10% 100%);
  padding-left: 1.2em;
}
li:nth-child(2n) {
  clip-path: polygon(10% 0, 100% 0, 90% 100%, 0 100%);
  padding: 0.3em 1.2em;
}
li:hover {
  background-color: black;
  color: white;
}

HTML

和你原有代码完全一致，无需调整：

<section>
  <ul>
    <li><a>Link 1</a></li>
    <li><a>Link 2</a></li>
    <li><a>Link 3</a></li>
    <li><a>Link 4</a></li>
  </ul>
</section>

调整说明 #

• 改用clip-path直接裁剪li的可视形状，li本身就带有契合的斜角，hover时的背景会自然填满整个可视区域，不会出现空隙
• 用ul背景色+li之间的gap实现斜角分隔线，比原旋转伪元素方案更稳定，不会出现定位偏移、高度适配问题
• 可自行调整clip-path的百分比值、gap宽度，来匹配你需要的斜角角度和分隔线粗细

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