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:

• Why is this line appearing? Is it a rendering issue?
• What is a sustainable solution to remove this line?

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="">
<link rel="preconnect" href="" crossorigin>
<link href=":[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>

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:

• Why is this line appearing? Is it a rendering issue?
• What is a sustainable solution to remove this line?

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">
<link rel="preconnect" href="https://fonts.gstatic" crossorigin>
<link href="https://fonts.googleapis/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>

• html
• css
• clip-path

Share Improve this question Follow edited Mar 13 at 12:54 Temani Afif 275k2828 gold badges366366 silver badges486486 bronze badges asked Mar 13 at 12:42 flipflip 13111 gold badge44 silver badges1515 bronze badges 2

• It works as is for Firefox for me. In Chromium, I used clip-path: inset(59% -5% 0% 0%); for the bottom part of the logo – Alexis Paques Commented Mar 13 at 12:58
• Well, that's exactly what I did but I was looking for a solution where I can avoid an overlap between both clipped areas. The answer of @Ori Drori solves this. – flip Commented Mar 13 at 18:35

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

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">
<link rel="preconnect" href="https://fonts.gstatic" crossorigin>
<link href="https://fonts.googleapis/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>

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

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