css 剪辑路径之间的小间隙答案

【问题标题】：css clip-path little gap betweencss 剪辑路径之间的小间隙
【发布时间】：2020-04-13 18:36:02
【问题描述】：

代码如下。 gradient 两个 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>

【问题讨论】：

欢迎来到 SO！请添加有关您的问题上下文的更多详细信息，以便其他人更容易理解。考虑添加您想要的与应用程序实际输出的信息或屏幕截图。另外，请查看this help center article。干杯:)

标签： html css clip-path

【解决方案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>

【讨论】：

【解决方案2】：

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

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>

【讨论】：

【解决方案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>

【讨论】：

【解决方案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>

【讨论】：

【解决方案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)。

【讨论】：