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. Cheers :) — vatbub
– vatbub, Commented Jan 31, 2019 at 10:59

Abhishek Pandey · Accepted Answer · 2019-01-31 11:02:50Z

3

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>

answered Jan 31, 2019 at 11:02

Abhishek Pandey

13.6k8 gold badges41 silver badges72 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Nicolás Alarcón Rapela · Accepted Answer · 2019-01-31 10:59:43Z

1

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>

answered Jan 31, 2019 at 10:59

Nicolás Alarcón Rapela

3,0621 gold badge21 silver badges35 bronze badges

Comments

doğukan · Accepted Answer · 2019-01-31 11:06:14Z

0

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>

answered Jan 31, 2019 at 11:06

doğukan

28k15 gold badges67 silver badges79 bronze badges

Comments

Temani Afif · Accepted Answer · 2019-01-31 11:12:12Z

0

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>

answered Jan 31, 2019 at 11:12

Temani Afif

280k30 gold badges378 silver badges503 bronze badges

Comments

Gavin · Accepted Answer · 2020-04-13 10:36:02Z

0

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

answered Apr 13, 2020 at 10:36

Gavin

8,0944 gold badges58 silver badges77 bronze badges

Collectives™ on Stack Overflow

css clip-path little gap between

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related