html - 沿对 Angular 线切割带有背景图像的 div

Question

我正在尝试创建一个使用对 Angular 线部分外观的网站。 I am trying to get this kind of angle.

我还需要完整的浏览器支持。我已经看到很多多边形修复，我尝试旋转 div 但它扩展了我的浏览器宽度并在顶部留下随机空白。如果有人可以帮忙，那将是惊人的。如果您需要任何说明，请告诉我。

.shape {
    width:400px;
    margin:0 auto;
}
.top {
    height:0;
    border-width:0 0 100px 400px;
    border-style:solid;
    border-color:transparent #d71f55 #d71f55 transparent;
}
.bottom {
    height: 0px;
    background-color:#d71f55;
}

/* Support transparent border colors in IE6. */
* html .top {
    filter:chroma(color=#123456);
    border-top-color:#123456;
    border-left-color:#123456;
}

<div class="shape">
    <div class="top"></div>
    <div class="bottom"></div>
</div>

Answer 1

此示例中的代码仅适用于“现代”浏览器，但如果您添加浏览器前缀，我相信可以回到 IE9。它使用旋转的 div 作为“剪切”，但将该 div 放在 overflow: hidden 容器中，这样您就不会得到您正在谈论的空白。

.wrapper {
  background: url(http://placehold.it/400/400/);
  width: 400px;
  height: 400px;
  overflow: hidden;
  border: 10px solid black;
  position: relative;
}

.cut {
  background: #fff;
  position:absolute;
  top: 300px;
  left: -50px;
  width: 500px;
  height: 300px;
  transform-origin: center top;
  transform: rotate(8deg);
}

<div class="wrapper">
  <div class="cut">
  </div>
</div>