在我的面包屑中仅显示之前/之后伪选择器之一的奇怪伪影

Question

我正在尝试使用箭头分隔线创建 3 部分面包屑类型元素。这是一个简单的模型。

在第 2 部分和第 3 部分之间显示了一个奇怪的人工制品。在这种情况下，第 2 部分的蓝色箭头左侧（稍微）可以看到第 3 部分的红色背景，但是第 2 部分的背景不会出现同样的问题干扰第 1 节箭头。谢天谢地，但奇怪的是。对我来说，这也只发生在 Chrome for Mac 上（浏览器窗口也没有放大/缩小）。还没有测试过 Windows 等。关于如何解决这个奇怪的问题有什么建议吗？

第 2 部分和第 3 部分之间发生的奇怪人工制品（红色垂直线）的放大视图：

在第 1 部分和第 2 部分之间没有出现这种奇怪的人工制品。

密码笔：

https://codepen.io/reacting/pen/xeewdO

html:

<div class="container">
  <div class="section">section one</div>
  <div class="section two">section two</div>  
  <div class="section">section three</div> 
</div>

css/scss：

.container {
  background-color: white;
  border: 1px solid grey;
  box-sizing: border-box;
  width: 100%;
  display: flex;
}
.section {
  flex: 1;
  position: relative;
  height: 100px;
  background-color: black;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  &:before {
    content:"";
    background-color: grey;
    -webkit-clip-path: polygon(0% 100%, 100% 50%, 0% 0%);
    clip-path: polygon(0% 100%, 100% 50%, 0% 0%);
    z-index: 1;
    position: absolute;
    right: -26px;
    top: 0;
    width: 25px;
      height: 100px;
  }
  &:after {
    content:"";
    background-color:black;
     -webkit-clip-path: polygon(0% 100%, 100% 50%, 0% 0%);
    clip-path: polygon(0% 100%, 100% 50%, 0% 0%);
    z-index: 2;
    position: absolute;
    right: -25px;
    top: 0;
    width: 25px;
    height: 100px;
  }
  &:last-of-type {
    background-color: red;
    color: black;
  }
  &:last-of-type:before {
   display: none;
  }
  &:last-of-type:after {
   display: none;
  }
  &.two {
   background-color: blue;
    &:after {
      background-color: blue;
    }
  }
}

body {
  background-color: #333;
}

我不只是想将 before/after 伪选择器的 right: 属性更改为小于 1 像素，因为这只是感觉不妥和错误。

非常感谢！

编辑：我想知道这个问题是否与我的 Mac 显示器的高分辨率有关 - 因为当我稍微调整 chrome 浏览器窗口的大小时，问题来来去去，并且在第 1/2 节或第 1/2 节都发生变化和 2/3 或没有。取决于浏览器窗口的大小。但奇怪的是，在 Firefox 和 Safari 中，拖动窗口时根本不会发生这种情况。

Answer 1

您可以优化代码并在不需要伪元素的元素上考虑clip-path，然后考虑一些背景颜色来模拟边框

.container {
  background-color: white;
  border: 1px solid grey;
  box-sizing: border-box;
  display: flex;
  height: 100px;
}

.section {
  flex: 1;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left:-25px; /* Create an overlap with the previous element */
  /* the clip path (note the 25px that is the same as margin*/
  -webkit-clip-path: polygon(100% 0, 100% 50%, 100% 100%, 0% 100%, 25px 50%, 0% 0%);
  clip-path: polygon(100% 0, 100% 50%, 100% 100%, 0% 100%, 25px 50%, 0% 0%);
  /* the border (note the 25px in the gradient)*/
  border-left:3px solid grey; /* this will push the background and control the thickness of the border*/
  background:
    linear-gradient(to top right,    grey 48%,transparent 50%) top left   /25px 50%,
    linear-gradient(to bottom right, grey 48%,transparent 50%) bottom left/25px 50%;
  background-repeat:no-repeat;
  background-color: black;
}
.section:last-of-type {
  background-color: red;
  color: black;
}
.section:first-of-type {
  /* Remove everything from the first element */
  clip-path:none; 
  margin-left:0;
  border-left:0;
  background:black;
}
.section.two {
  background-color: blue;
}

body {
  background-color: #333;
}

<div class="container">
  <div class="section">section one</div>
  <div class="section two">section two</div>
  <div class="section">section three</div> 
</div>