css clip-path little gap between

Question

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>

Welcome to SO! Please add more details about the context of your question to make it easier to understand for others. Consider adding information or screenshots of your desired vs. the actual output of your application. Also, have a look at [this help center article](https://stackoverflow.com/help/how-to-ask). Cheers :) — vatbub, Jan 31 '19 at 10:59

score 3 · Accepted Answer · answered Jan 31 '19 at 11:02

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>

score 1 · Answer 2 · answered Jan 31 '19 at 10:59

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>

score 0 · Answer 3 · answered Jan 31 '19 at 11:06

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>

score 0 · Answer 4 · answered Jan 31 '19 at 11:12

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>

score 0 · Answer 5 · answered Apr 13 '20 at 10:36

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).

css clip-path little gap between

5 Answers5