Question

我正在尝试使用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) [hypotenuse of triangle = new rectangle width] : width = tan(3deg) * 100% / sin(3deg) = 5.24078%.

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

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

Answer 1

这通常在转换元素时发生，因为浏览器开始使用元素＆＃39;进行抗锯齿处理。边缘。

Antialiasing是网络图形中无名英雄的东西;是的我们在屏幕上有明文和平滑矢量形状的原因。

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

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

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

演示而不使用backface-visibility: hidden;

＆＃13;

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;
}

＆＃13;

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

＆＃13;

使用backface-visibility: hidden;

进行演示

＆＃13;

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;
}

＆＃13;

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

＆＃13;

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

＆＃13;

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;
}

＆＃13;

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

＆＃13;

PS：不要忘记使用viewport meta标记来表示响应能力。

来源 Antialiasing-101

Answer 2

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

这是一个CodePen，下面是我的CSS：

extern

Answer 3

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

＆＃13;

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

＆＃13;

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

＆＃13;

所以transform:rotate()或其他东西没有造成任何麻烦。现在您的问题可以通过

解决

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

Answer 4

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

top: 0px;

到

top: 1px;

一切都应该没问题。

为什么div和旋转div（三角形）之间存在差距

4 个答案: