如何设置相对于另一个元素的旋转元素位置，以及如何在调整窗口大小时保持位置

Question

我们正在一个带有complicated masonry design，“碎片”的网站上工作，这些碎片的线条与页面中的其他元素相交并与之相邻。我发现的问题是，当使用transform旋转元素并将其相对于其父“碎片”定位时，在调整窗口大小时会丢失位置。

我已经多次重组了整个文档，尝试使用伪元素，尝试使用相对和绝对定位。

I've created a jsfiddle来说明问题，here is an image of what it looks like ideally in 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%;
}