html - css 剪辑路径之间的小间隙

Question

代码如下。 渐变 两个 div 之间有一个非常小的间隙。但它不应该有。

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

标签： htmlcssclip-path

Answer 1

这是因为Antialiasing发生的。

left:0;与左类和右类一起使用left: -1px;以重叠抗锯齿

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