Как установить положение повернутых элементов относительно другого элемента и сохранить положение при изменении размера окна - PullRequest
Новая
       12

Как установить положение повернутых элементов относительно другого элемента и сохранить положение при изменении размера окна

0 голосов
/ 08 апреля 2019

Мы работаем над сайтом с сложным каменным дизайном , «осколками» с линиями, пересекающими и ограничивающими другие элементы на странице. Проблема, которую я обнаружил, заключается в том, что когда элемент поворачивается с использованием преобразования и позиционируется относительно его родительского «осколка», позиция теряется при изменении размера окна.

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

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

HTML (это рабочий пример) 

<div class="w100">
  <div class="w50">

  </div>
  <div class="w50">
    <div id="first">
      <div class="cut">
        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTwDJe-ZVvp_VChF3CJqLdmSam6KTVNugcSFnDtYLA2fL0brbJR" alt="">
      </div>
    </div>
  </div>
</div>

CSS 

.w100 {
  position: relative;
  display: block;
  width: 100%;
  height: 100vh;
}

.w50 {
  position: relative;
  width: 50%;
  height: 100%;
  float: left;
}

.w50:first-child {
  background: #aaa;
}

img {
  min-width: 100%;
  height: 100vh;
}

#first {
  width: 56%;
}

#first .cut {
  clip-path: polygon(90% 0px, 100% 49%, 19% 100%, 0px 100%, 0px 0px);
}

#first::after {
  content: '';
  position: relative;
  width: 100%;
  display: block;
  background: #d1d3d4;
  height: 3px;
  left: 50px;
  bottom: 15px;
  transform: rotate(-44deg);
  transform-origin: 0% 0%;
}
...