为什么div和旋转的div（三角形）之间有间隙答案

【问题标题】：Why there is a gap between div and rotated div (triangle)为什么div和旋转的div（三角形）之间有间隙
【发布时间】：2017-12-16 16:01:33
【问题描述】：

我正在尝试在 HTML/CSS 中为我的移动应用程序制作此形状： https://embed.plnkr.co/9k8jbJyzUiSMSoSHlOti/

.boundary {
  width: 100.13723%;
  padding-bottom: 5.24078%;
  position: relative;
  overflow: hidden;
  background-color: white;
}

.boundary:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform-origin: top left;
  transform: rotate(3deg);
  background-color: green;
}

.inner {
  height: 100%;
  width: 100%;
  background-color: green;
}

<div class="boundary"></div>
<div class="inner">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis auteirure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

在我的浏览器中，当我检查元素并更改缩放（至 75%）时，2 <div> 之间存在间隙。当我在我的设备中部署我的应用程序时，我可以看到同样的差距。

发生了什么事？

这就是我制作形状的方式：

我创建了第一个 div 来做斜线。我制作了一个响应式三角形（我从Question 中挑选了一些信息）

1) 在我的 div 中，我插入了第一个伪元素，并为其赋予 100% 的父级宽度和高度。我应用了旋转：我在左上角定义了一个变换原点，并使用transform: rotate(3deg) 将伪元素顺时针旋转了 3 度@

2）我必须调整宽度和高度：我使用百分比和padding-bottom 来保持纵横比（more information here）所以：

[rectangle height] : padding-bottom = tan(3deg) * 100% = 100.13723% (100% is the screen width)<br>[hypotenuse of triangle = new rectangle width] : width = tan(3deg) * 100% / sin(3deg) = 5.24078%.

3) 为了隐藏伪元素的不需要的部分（所有溢出 <div> 的红色边框）我在容器上设置了 overflow: hidden。

在第一个倾斜<div> 之后，我制作了第二个<div>。这个<div> 很简单，没有特殊的转换，并且包含Lorem ipsum。

【问题讨论】：

对我来说奇怪的是，使用 Chrome 时，奇怪的行只在“检查”模式下显示，但在其余时间不显示。

标签： html css rotation rectangles

【解决方案1】：

对我来说这是渲染问题。如果你改变了

top: 0px;

到

top: 1px;

一切都应该没问题。

【讨论】：

top: 1px 似乎没有更好的效果（刚刚在给定的 plnkr 上测试过，你试过吗？）。顺便说一句，非常奇怪的问题。

【解决方案2】：

这通常发生在转换元素时，因为浏览器开始对元素的边缘进行抗锯齿处理。

抗锯齿是网络图形中的无名英雄；这是原因是我们的屏幕上有清晰的文本和平滑的矢量形状。

虽然缩小/缩小浏览器无法正确重新缩放元素，例如如果您将1px 高度的元素缩小到0.75%，浏览器应该将元素重绘为0.75px，但浏览器无法绘制0.75px，它要么可以创建它1，要么它会尝试使边缘平滑像素模糊或 50% 不透明度。

在上图中，您可以看到绘制了相同的三角形，但在左侧它启用了抗锯齿，在右侧它被禁用。如您所见，启用抗锯齿后，当三角形仅通过部分像素时，像素为灰色阴影。但是，禁用时，像素将填充为纯黑色或纯白色，并且形状看起来参差不齐。

在缩放/转换时使用backface-visibility: hidden; 或重叠具有负边距的元素是避免此问题的更好选择。

演示不使用backface-visibility: hidden;

html,
body {
  transform: scale(.8);
}

.boundary {
  width: 100.13723%;
  padding-bottom: 5.24078%;
  position: relative;
  overflow: hidden;
  background-color: white;
}

.boundary:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform-origin: top left;
  transform: rotate(3deg);
  background-color: green;
}

.inner {
  height: 100%;
  width: 100%;
  background-color: green;
}

<div class="boundary"></div>
<div class="inner">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

使用backface-visibility: hidden;的演示

html,
body {
  transform: scale(.8);
}

.boundary {
  width: 100.13723%;
  padding-bottom: 5.24078%;
  position: relative;
  overflow: hidden;
  background-color: white;
}

.boundary:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform-origin: top left;
  transform: rotate(3deg);
  background-color: green;
}

.inner {
  height: 100%;
  width: 100%;
  background-color: green;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

<div class="boundary"></div>
<div class="inner">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

OP in comment提供的Demo使用backface-visibility: hidden;和negative margin重叠元素解决

html,
body {
  transform: scale(.75);
}

.inner {
  height: 100%;
  width: 100%;
  background-color: green;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.inner-2 {
  background-color: red;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.inner-3 {
  background-color: blue;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.boundary {
  width: 100.13723%;
  padding-bottom: 5.24078%;
  position: relative;
  overflow: hidden;
  background-color: white;
  margin-top: -2px;
}

.boundary:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform-origin: top left;
  transform: rotate(3deg);
  background-color: green;
  backface-visibility: hidden;
}

.boundary-2 {
  background-color: green;
}

.boundary-2:before {
  transform-origin: top right;
  transform: rotate(-3deg);
  background-color: red;
}

.boundary-3 {
  background-color: red;
}

.boundary-3:before {
  transform-origin: top left;
  transform: rotate(3deg);
  background-color: blue;
}

<div class="boundary"></div>
<div class="inner">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

<div class="boundary boundary-2"></div>
<div class="inner inner-2">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

<div class="boundary boundary-3"></div>
<div class="inner inner-3">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

PS：不要忘记使用viewport meta标签来响应。

来源 Antialiasing-101

【讨论】：

它似乎可以工作，但并非没有添加一些新问题（在滚动之后发生）......不幸的是，我们无法在 plnkr 上重现它们，这是我们真正拥有的简化版本。尽快与您联系
@SébastienBATEZAT Using backface-visibility: hidden; 适用于 OP 问题中的给定示例，如果这在您的情况下不起作用，则会有任何其他问题，如果可能的话，请提供工作演示或原始代码。
@Downvoter，评论你投反对票的原因，以便我改进我的答案。
对我有用，但现在div.boundary的顶部斜坡上有一个奇怪的阶梯效果
它似乎有效，但是当我在第一个形状下方添加 2 个形状时，2 个 div 之间存在间隙。为什么？看这里：embed.plnkr.co/9k8jbJyzUiSMSoSHlOti

【解决方案3】：

我想我已经通过使用倾斜并在顶部添加边框和负边距来修复它。

这是CodePen，下面是我的 CSS：

.boundary {
    padding-bottom: 5.24078%;
    position: relative;
    overflow: hidden;
    background-color: white;
}

.boundary:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 105%;
  height: 105%;
  transform-origin: top left;
  background-color: green;
  transform: skew(0, 3deg);
  z-index: 10;
}


.inner {
  height: 100%;
  width: 100%;
  background-color: green;
  color: #fff;
  z-index: 50;
  position: relative;
  border-top: 1px solid green;
  margin-top: -1px;
}

【讨论】：

【解决方案4】：

即使您不应用任何转换，差距仍然存在。

.boundary {
  width: 100.13723%;
  padding-bottom: 5.24078%;
  position: relative;
  overflow: hidden;
  background-color: white;
}

.boundary:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /*transform-origin: top left;*/
  /*transform: rotate(3deg);*/
  background-color: green;
}

.inner {
  height: 100%;
  width: 100%;
  background-color: green;
}

<div class="boundary"></div>
<div class="inner">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis auteirure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

所以transform:rotate() 或其他东西不会造成任何麻烦。现在你的问题可以解决了

.inner {
  margin-top: -2px;
  /* experiment different value or unit for different zoom levels*/
  height: 100%;
  width: 100%;
  background-color: green;
}

【讨论】：