問題描述

我正在嘗試在 HTML/CSS 中為我??的移動應用程序制作此形狀:

這就是我制作形狀的方式:

• 我創建了第一個 div 來做斜線.我做了一個響應三角形(我從這個

  在上圖中，您可以看到繪制了相同的三角形，但在左側它啟用了抗鋸齒，在右側它被禁用.如您所見，啟用抗鋸齒后，當三角形僅通過部分像素時，像素為灰色陰影.但是，禁用時，像素將填充為純黑色或純白色，并且形狀看起來參差不齊.

  <小時>

  使用 背面可見性:隱藏； 或在縮放/轉換時重疊具有負邊距的元素是避免此問題的更好選擇.

  演示不使用backface-visibility: hidden;

  html,身體 {變換:比例(.8)；}.邊界{寬度:100.13723%；底部填充:5.24078%；位置:相對；溢出:隱藏；背景顏色:白色；}.boundary:之前{內容: '';位置:絕對；頂部:0；左:0；寬度:100%；高度:100%；變換原點:左上角；變換:旋轉(3度)；背景顏色:綠色；}.inner {高度:100%；寬度:100%；背景顏色:綠色；}

  <div class="boundary"></div><div 類="內部">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在 voluptate velit esse cillum dolore eu fugiat nulla pariatur 受到譴責.Exceptioneur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est labourum.</div>

  <小時>

  使用 backface-visibility: hidden;

  的演示

  html,身體 {變換:比例(.8)；}.邊界{寬度:100.13723%；底部填充:5.24078%；位置:相對；溢出:隱藏；背景顏色:白色；}.boundary:之前{內容: '';位置:絕對；頂部:0；左:0；寬度:100%；高度:100%；變換原點:左上角；變換:旋轉(3度)；背景顏色:綠色；}.inner {高度:100%；寬度:100%；背景顏色:綠色；背面可見性:隱藏；-webkit-backface-visibility:隱藏；}

  <div class="boundary"></div><div 類="內部">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在 voluptate velit esse cillum dolore eu fugiat nulla pariatur 受到譴責.Exceptioneur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est labourum.</div>

  <小時>

  演示由 OP in comment 通過使用 backface-visibility: hidden; 和具有 negative margin

  的重疊元素解決

  html,身體 {變換:比例(.75)；}.inner {高度:100%；寬度:100%；背景顏色:綠色；背面可見性:隱藏；-webkit-backface-visibility:隱藏；}.inner-2 {背景顏色:紅色；背面可見性:隱藏；-webkit-backface-visibility:隱藏；}.inner-3 {背景顏色:藍色；背面可見性:隱藏；-webkit-backface-visibility:隱藏；}.邊界{寬度:100.13723%；底部填充:5.24078%；位置:相對；溢出:隱藏；背景顏色:白色；邊距頂部:-2px；}.boundary:之前{內容: '';位置:絕對；頂部:0；左:0；寬度:100%；高度:100%；變換原點:左上角；變換:旋轉(3度)；背景顏色:綠色；背面可見性:隱藏；}.boundary-2 {背景顏色:綠色；}.boundary-2:之前 {變換原點:右上角；變換:旋轉(-3度)；背景顏色:紅色；}.boundary-3 {背景顏色:紅色；}.boundary-3:之前 {變換原點:左上角；變換:旋轉(3度)；背景顏色:藍色；}

  <div class="boundary"></div><div 類="內部">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在 voluptate velit esse cillum dolore eu fugiat nulla pariatur 受到譴責.Exceptioneur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est labourum.</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在 voluptate velit esse cillum dolore eu fugiat nulla pariatur 受到譴責.Exceptioneur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est labourum.</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在 voluptate velit esse cillum dolore eu fugiat nulla pariatur 受到譴責.Exceptioneur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est labourum.</div>

  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:

  • I create a first div to do the inclined line. I make a responsive triangle (I picked some information from this Question)

    1) In my div, I insert a first pseudo-element and give it 100% width and height of parent. I apply a rotation : I define a transform origin in the top left, and rotate the pseudo element 3 degrees clockwise with transform: rotate(3deg)

    2) I have to adjust width and height: I use percentages and padding-bottom to maintain the aspect ratio (more information here) so:

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

  • I make a second <div> after the first inclined <div>. This <div> is simple, without special transformation, and contains Lorem ipsum.
  解決方案

  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(三角形)之間有間隙的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！

  【網站聲明】本站部分內容來源于互聯網,旨在幫助大家更快的解決問題，如果有圖片或者內容侵犯了您的權益，請聯系我們刪除處理，感謝您的支持！