如何删除剪裁元素之间的细线？

Question

I使用CSS

clip-path

将徽标夹在2个部分中并取代它们以创建以下效果，但两个元素之间仍然存在细线：

为什么这条线出现？这是一个渲染问题吗？
什么是删除这一线的可持续解决方案？

I写了一个

术，并通过稍微重叠夹板区域来提出解决方案（请参阅3。删除位移元素之间的细线）。但是，我认为必须有一个更好的解决方案，我很想听听您的…… I在Codepen

上设置

代码片段（带有我的重叠解决方案）或在下面设置（没有任何修复程序）。

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
  background-color: #120a8f;
}

.logo__link {
  position: relative;
  color: #ffff00;
  font-family: Outfit, Helvetica, sans-serif;
  font-style: italic;
  font-size: 5rem;
  font-weight: 900;
  text-decoration: none;
}

.logo__name-top {
  position: absolute;
  top: 0;
  right: 0.05em;
  clip-path: inset(0% -5% 40% 0%);
}

.logo__name-bottom {
  position: absolute;
  top: 0;
  right: 0;
  clip-path: inset(60% -5% 0% 0%);
}

.logo__name-pseudo {
  visibility: hidden;
}

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Outfit:[email protected]&display=swap" rel="stylesheet">

<a href="/" class="logo__link">
  <span class="logo__name-pseudo">Piranhas</span>
  <span class="logo__name-top"   >Piranhas</span>
  <span class="logo__name-bottom">Piranhas</span>
</a>

您可以从顶部名字的底部降下to的底部，而底部的名字的顶部则可以避免差距：

Answer 1

clip-path1px