Почему существует разрыв между div и повернутым div (треугольником)

Ответ 1

Это обычно происходит при преобразовании элементов, потому что браузер начинает сглаживание с краями элементов.

Сглаживание является чем-то вроде невоспетых героев в веб-графике; это мы имеем четкий текст и гладкие векторные фигуры на наших экранах.

Во время масштабирования/в браузере не выполняется масштабирование элемента должным образом, например. если вы уменьшаете размер 1px height до 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>

Ответ 2

Я думаю, что исправил его, используя перекос и добавив границу и отрицательный запас вверху.

Здесь 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;
}

Ответ 3

Разрыв все еще существует, даже если вы не применяете никаких преобразований.

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

Ответ 4

Для меня это проблема рендеринга. Если вы измените

top: 0px;

to

top: 1px;

все должно быть хорошо.