为什么div和旋转的div（三角形）之间存在间隙 [英] Why there is a gap between div and rotated div (triangle)

查看：77
本文介绍了为什么div和旋转的div（三角形）之间存在间隙的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在尝试为移动应用程序在HTML / CSS中创建此形状：



这是我如何制作形状：




  • 我创建了第一个div来做斜线。我做了一个响应性三角形（我从



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





    使用 背面可见性：隐藏; 或在缩放/转换时重叠具有负边距的元素是避免此问题的更好选择。



    不使用背面可见性的演示：隐藏； 



      html，body {transform：scale（.8）;}。boundary {width：100.13723％;底边填充：5.24078％;职位：相对溢出：隐藏； background-color：white;}。boundary：before {content：’’;位置：绝对；最高：0;左：0；宽度：100％;高度：100％; transform-origin：左上方；变换：rotate（3deg）;背景颜色：绿色；}。inner {高度：100％;宽度：100％;背景颜色：绿色；}  

     < div class =  boundary>< / div>< div class = inner> Lorem ipsum dolor刚坐下，擅长奉献精英，seu do eiusmod tempor incididunt ut Labore et dolore magna aliqua。尽量不要抽烟，不要因抽烟而锻炼。 Duis aute irure dolor in reprehenderit in voltate velit esse cillum dolore eu fugiat nulla pariatur。

    >





演示使用背面可见性：隐藏； 



  html，body {transform：scale（.8）;}。边界{宽度：100.13723％;底边填充：5.24078％;职位：相对溢出：隐藏； background-color：white;}。boundary：before {content：’’;位置：绝对；最高：0;左：0；宽度：100％;高度：100％; transform-origin：左上方；变换：rotate（3deg）;背景颜色：绿色；}。inner {高度：100％;宽度：100％;背景颜色：绿色；背面可见度：隐藏； -webkit-backface-visibility：隐藏；}  

 < div class = boundary>< / div>< div class = inner> Lorem ipsum dolor刚坐下，擅长奉献精英，seu do eiusmod tempor incididunt ut Labore et dolore magna aliqua。尽量不要抽烟，不要因抽烟而锻炼。 Duis aute irure dolor in reprehenderit in voltate velit esse cillum dolore eu fugiat nulla pariatur。

>





由注释中的OP 通过使用背面可见性：隐藏； 解决和具有负边距

的重叠元素

  html，body {transform：scale（.75）;}。inner {height：100％;宽度：100％;背景颜色：绿色；背面可见度：隐藏； -webkit-backface-visibility：hidden;}。inner-2 {background-color：red;背面可见度：隐藏； -webkit-backface-visibility：hidden;}。inner-3 {background-color：blue;背面可见度：隐藏； -webkit-backface-visibility：hidden;}。boundary {width：100.13723％;底边填充：5.24078％;职位：相对溢出：隐藏；背景颜色：白色； margin-top：-2px;}。boundary：before {content：’’;位置：绝对；最高：0;左：0；宽度：100％;高度：100％; transform-origin：左上方；变换：rotate（3deg）;背景颜色：绿色； backface-visibility：hidden;}。boundary-2 {background-color：green;}。boundary-2：before {transform-origin：top right;变换：rotate（-3deg）; background-color：red;}。boundary-3 {background-color：red;}。boundary-3：before {transform-origin：左上方；变换：rotate（3deg）;背景颜色：蓝色；}  

 < div class =  boundary>< / div>< div class = inner> Lorem ipsum dolor刚坐下，擅长奉献精英，seu do eiusmod tempor incididunt ut Labore et dolore magna aliqua。尽量不要抽烟，不要因抽烟而锻炼。 Duis aute irure dolor in reprehenderit in voltate velit esse cillum dolore eu fugiat nulla pariatur。 < / div>< div class =边界边界-2< / div>< div class = div class = inner internal内部） -2> Lorem ipsum dolor刚坐下，擅长奉献精英，seu do eiusmod tempor incididunt ut Labore et dolore magna aliqua。尽量不要抽烟，不要因抽烟而锻炼。 Duis aute irure dolor in reprehenderit in voltate velit esse cillum dolore eu fugiat nulla pariatur。 < / div>< div class = boundary boundary-3< / div>< div class = boundary boundary-3>< / div>< div class = inner内部内部 -3> Lorem ipsum dolor刚坐下，擅长奉献精英，seu do eiusmod tempor incididunt ut Labore et dolore magna aliqua。尽量不要抽烟，不要因抽烟而锻炼。 Duis aute irure dolor in reprehenderit in voltate velit esse cillum dolore eu fugiat nulla pariatur。

>



PS：别忘了使用 viewport meta 标签来提高响应速度。



来源 Antialiasing-101


I am trying to do this shape in HTML/CSS for my mobile app: 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>

In my browser, when I inspect the element and change the zoom (to 75%), there is a gap between 2 <div>. When I deploy my application in my device, I can see this same gap.

What is going on ?

This is how I make the shape:

[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) To hide the unwanted parts of the pseudo element (everything that overflows the <div> with the red border) I set overflow: hidden on the container.

解决方案

This usually happens while transforming elements because browser starts doing antialiasing with elements' edges.

Antialiasing is something of an unsung hero in web graphics; it’s the reason we have clear text and smooth vector shapes on our screens.

While zooming out/in browser doesn't rescale element properly, e.g. if you zoom out an element of 1px height to 0.75%, browser should redraw element to 0.75px but browser cannot draw 0.75px, it either can create it 1 or it will try to make edges smooth with making pixel blur or 50% opacity.

In above picture you can see the same triangle being drawn, but on the left it has antialiasing enabled and on the right it’s been disabled. As you can see, when antialiasing is enabled the pixels are shades of gray when the triangle only passes through part of the pixel. When disabled, however, the pixel is filled in as either solid black or solid white and the shape looks jagged.

Using backface-visibility: hidden; or overlapping elements with negative margins while scaling/transforming is the better option to avoid this issue.

Demo without using 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>

Demo with using 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>

Demo provided by OP in comment solved by using backface-visibility: hidden; and overlapping elements with 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: Don't forget to use viewport meta tag for responsiveness.

Source Antialiasing-101

这篇关于为什么div和旋转的div（三角形）之间存在间隙的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆