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

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来做倾斜线.我做了一个响应三角形(我从这个问题中选择了一些信息)

  1)在我的div中,我插入第一个伪元素并给它100%的父级宽度和高度.我应用一个旋转:我在左上角定义一个变换原点,然后顺时针旋转伪元素3度transform: rotate(3deg)

  2)我必须调整宽度和高度:我使用百分比并padding-bottom保持纵横比(这里有更多信息)所以:

[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

这通常在转换元素时发生,因为浏览器开始使用元素的边缘进行抗锯齿.

抗锯齿是网络图形中无名英雄的东西; 这就是我们在屏幕上有清晰文字和平滑矢量形状的原因.

虽然缩小/在浏览器中没有正确地重新缩放元素,例如,如果你缩小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提供的演示通过使用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标签进行响应.

Source Antialiasing-101

Answer 2

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

top: 0px;

到

top: 1px;

一切都应该很好。