CODEWITHSUNDEEP
htmlcssclip-path
David Xu
David Xu

Reputation: 33

css clip-path little gap between

The code is below. gradient there is a very small gap between two divs.but it should not have.

.gra {
  position: absolute;
  width: 200px;
  height: 200px;
}

.left {
  background: linear-gradient(0deg, red 0%, blue 100%);
  clip-path: polygon(0% 0%, 0% 100%, 100% 100%);
}

.right {
  background: linear-gradient(270deg, red 0%, blue 100%);
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%);
}
<div class='gra left'></div>
<div class='gra right'></div>

Upvotes: 3

Views: 1881

Answers (5)

Gavin
Gavin

Reputation: 7976

You can fix this by adding a half pixel to the 100% values.

Change:

clip-path: polygon(0% 0%, 0% 100%, 100% 100%);

To:

clip-path: polygon(0% 0%, 0% calc(100% + 0.5px), 100% calc(100% + 0.5px));

If you need to fix a gap on the top, you could change 0% to calc(0% - 0.5px).

Upvotes: 0

Temani Afif
Temani Afif

Reputation: 274252

Here is an idea without clip-path where you will have a better support, less of code and no gap issue

.container {
  background: linear-gradient(to left, red 0%, blue 100%);
  position: relative;
  height: 200px;
  width: 200px;
  overflow: hidden;
}

.container:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to top, red 0%, blue 100%);
  transform-origin: bottom right;
  transform: skewX(45deg);
}
<div class="container">
</div>

Upvotes: 0

doğukan
doğukan

Reputation: 27559

Or, another way:

.gra {
  position: relative;
  width: 200px;
  height: 200px;
  overflow:hidden;
}

.left {
  background: linear-gradient(0deg, red 0%, blue 100%);
  clip-path: polygon(0% 0%, 0% 100%, 100% 100%);
  position:absolute;
  bottom:0;
  left:0;
  width:201px;
  height:201px;
}

.right {
  background: linear-gradient(270deg, red 0%, blue 100%);
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%);
  position:absolute;
  top:0;
  right:0;
  width:201px;
  height:201px;
}
<div class="gra">
  <div class="left"></div>
  <div class="right"></div>
</div>

Upvotes: 0

Abhishek Pandey
Abhishek Pandey

Reputation: 13578

It's happening because of Antialiasing.

Use left:0; with the left class and left: -1px; with the right class to overlap Antialiasing

.gra {
  position: absolute;
  width: 200px;
  height: 200px;
}

.left {
  background: linear-gradient(0deg, red 0%, blue 100%);
  clip-path: polygon(0% 0%, 0% 100%, 100% 100%);
  left:0;
}

.right {
  background: linear-gradient(270deg, red 0%, blue 100%);
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%);
  left: -1px;
}
<div class='gra left'></div>
<div class='gra right'></div>

Upvotes: 3

Nicol&#225;s Alarc&#243;n Rapela
Nicol&#225;s Alarc&#243;n Rapela

Reputation: 2982

You can change by:

clip-path: polygon(-1% 0%, 100% 0%, 100% 101%);


.gra {
  position: absolute;
  width: 200px;
  height: 200px;
}

.left {
  background: linear-gradient(0deg, red 0%, blue 100%) ;
  clip-path: polygon(0% 0%, 0% 100%, 100% 100%);
}

.right {
  background: linear-gradient(270deg, red 0%, blue 101%);
  clip-path: polygon(-1% 0%, 100% 0%, 100% 101%);
}
<div class='gra left'></div>
<div class='gra right'></div>

Upvotes: 1

Related Questions