css clip-path之间的差距很小

Question

代码如下。 gradient 两个 divs.but 之间的差距很小。

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

Answer 1

您可以通过以下方式更改：

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>

Answer 2

它的发生是因为 Antialiasing。

使用left:0;与左侧class和left: -1px;与右侧class重叠抗锯齿

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

Answer 3

或者，另一种方式：

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

Answer 4

这是一个没有 clip-path 的想法，您将获得更好的支持、更少的代码并且没有间隙问题

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

Answer 5

您可以通过向 100% 值添加半个像素来解决此问题。

变化：

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

收件人：

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

如果你需要在顶部修复一个空隙，你可以将 0% 更改为 calc(0% - 0.5px)。

css clip-path之间的差距很小

css clip-path little gap between

html

css

clip-path