元素和伪元素之间的接缝

Question

我有以下箭头：

body,
html {
  font-family: sans-serif;
}

.wrapper {
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.arrow {
  position: relative;
  background-color: #156082;
  color: white;
  padding: 5px;
  width: max-content;
}

.arrow::after {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  border: 30px solid transparent;
  border-left: 30px solid #156082;
  top: -15px;
  right: -60px;
}

<div class="wrapper">
  <div class="arrow">
    <strong>This is a label</strong>
  </div>
</div>

箭头头

30px

宽。我想将箭头定位为直接从

div.arrow

元素的右侧开始。我使用

right: -60px;

来实现此目的（2 x

30px

，因为这是箭头的宽度）。然而，元素和伪元素之间仍然有一个 1px 的接缝（至少在我的视口上），如下图所示：

这怎么可能？

::after

元素不应该直接从

div.arrow

元素的右侧开始吗？这是由于浏览器舍入或渲染差异造成的，因为接缝在不同的缩放级别上消失了？

我知道我可以使用

right: -59px;

来解决这个问题，但这对我来说感觉很奇怪，我更喜欢一个实际的解决方案。

Answer 1

是的， ::after 伪元素假设三角形将恰好从父 .arrow 元素的右边缘开始。但由于子像素舍入，浏览器可能会将位置解释为稍微偏离（例如，-60.5px 而不是恰好 -60px）。当您使用与显示器的像素网格不完全对齐的像素值时，某些浏览器可能会以不同的方式舍入，从而在元素之间产生小间隙或接缝。

一个解决方案可能是 @Temani Afif 在评论中发布的 css-shape.com/arrow 。另一种可能是使用

calc

进行更好的舍入。例如：

right: calc(-1 * 30px);