htmlcssclip-path

How to remove thin line between clipped elements?

I used CSS clip-path to clip a logo into 2 parts and displace them to create the following effect but there remains a thin line between both elements:

e

I wrote an article and came up with a solution by slightly overlapping the clipped areas (see 3. Remove Thin Line Between Displaced Elements). However, I think that there must be a better solution and I would love to hear your's ...

I setup the code snippet on CodePen (with my overlapping solution) or alternatively below (without any fix).

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:wght@100..900&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>

Solution

  • You can round down the clip-path top name's bottom, and the bottom name's top to the nearest 1px to avoid the gap:

    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% round(down, 40%, 1px) 0%);
}

.logo__name-bottom {
  position: absolute;
  top: 0;
  right: 0;
  clip-path: inset(round(down, 60%, 1px) -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:wght@100..900&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>

    You can use pseudo-elements and get the content from a data-* attribute to make the code more concise:

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

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

.logo__name {
  position: relative;
  
  &::before, &::after {
    content: attr(data-text);
  }
  
  &::before {
    position: absolute;
    top: 0;
    right: 0.05em;
    clip-path: inset(0% -5% round(down, 40%, 1px) 0%);
  }
  
  &::after {
    clip-path: inset(round(down, 60%, 1px) -5% 0% 0%);  
  }
}
    <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:wght@100..900&display=swap" rel="stylesheet">

<a href="/" class="logo__link">
  <span class="logo__name" data-text="Piranhas"></span>
</a>