保持旋转的div不会在页面上展开调整大小

Question

我有两个旋转的div，应该与页面扩展保持相同的距离，并且不会增长。但是，由于它们目前正在设置，它们会扩展并且它们之间的空间会增大。我需要它们在页面扩展时保持它们的距离和宽度，并且不确定它们为什么不像它们当前设置的那样：

<div class="masthead-wrapper">
  <div class="masthead-two-boxes-angled-wrapper">
    <div class="left">Left</div>
    <div class="right">Right</div>
  </div>
</div>



.masthead-wrapper {
  z-index: 0;
  width: 100%;
  margin-bottom: 10px;
  .masthead-content {
    position: relative;
    display: flex;
    width: 1172px;
    background-color: #fff;
    margin: 0 auto;
  }
  .masthead-two-boxes-angled-wrapper {
    height: 400px;
    margin: 0 auto;
    display: flex;
    z-index: 0;
    transform: rotate(-45deg);
    .left {
      width: 45%;
      background-color: #eee;
      height: 100%;
      margin: 0 auto;
      top: -20px;
      position: relative;
    }
    .right {
      width: 40%;
      background-color: #eee;
      height: 100%;
      margin: 0 auto;
      bottom: 20px;
      position: relative;
      box-shadow: 0 -22px 29px 10px #cecece;
    }
  }
}

的jsfiddle：Link

Answer 1

当屏幕宽度发生变化时，它们会响应，因为在.masthead-wrapper上设置的宽度是百分比。将其更改为像素宽度将阻止调整大小的发生。但是，对于像素宽度，您可能需要设置不同的断点来调整左右框在桌面设备，平板电脑和移动设备上的显示方式。

例：

.masthead-wrapper {
    z-index: 0;
    width: 100%;
    margin-bottom: 10px;

    /* Tablet */
    @media (min-width: 480px) {
        width: 400px;
    }

    /* Desktop */
    @media (min-width: 960px) {
        width: 600px;
    }
}

此外，您有一个未在HTML（.masthead-content）中引用的样式类。您可以完全删除它，除非您出于其他原因需要它。希望这可以帮助。

更新小提琴：http://jsfiddle.net/meq31d0x/25/