Html 元素上的幻影边框

我有一个填充圆和一个子元素。我希望子元素“附加”到左边的圆圈上。但我不希望这个元素的右边缘有一个可见的边框

我不知道为什么，但当这两个元素重叠时，子元素在右边有一个模糊的虚线边框

正文{
高度：900px；
宽度：1600px；
缩放：500%；
}
.集装箱{
位置：相对位置；
显示器：flex；
证明内容：中心；
对齐项目：居中；
身高：100%；
宽度：100%；
}
.圆圈{
位置：绝对位置；
/*边框：纯色3px黑色*/
背景：黄色；
宽度：300px；
高度：300px；
边界半径：100%；
显示器：flex；
对齐项目：居中；
}
.arc{
位置：绝对位置；
宽度：29%；
身高：25%；
背景颜色：黄色；
变换：平移（-68%，15%）旋转（-24度）；
边界半径：100%0%0%100%；
/*将最后一个num更改为0将获得rid
幻影边界*/
边框宽度：3px 0px 3px 3px；
边框颜色：黑色；
边框样式：实心；
/*填充1px可以在元素未旋转时消除它*/
填充：1px；
}

---

如果没有其他方法可以用伪元素间接隐藏它，那么在边缘匹配颜色似乎可以解决出现的混叠问题编辑：我选中了将DPI缩放设置为100%，它似乎与此无关

.arc:before {
  content: ' ';
  display: block;
  position: absolute;
  right: 0;
  top: 0;
  width: 1px;
  height: 100%;
  background-color: yellow;
}

---

尝试将填充：1px添加到。arc@TemaniAfif谢谢，当元素没有旋转时，这会起作用。但当它旋转时，似乎仍然有一个微弱的部分边界。应该说得更清楚，我的错。我已经更新了代码笔和帖子。