Question

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

我还需要完整的浏览器支持。我已经看到很多多边形修复，我已经尝试旋转div但它扩展了我的浏览器宽度并留下顶部随机的空白区域。如果有人能提供帮助，那就太棒了。如果您需要任何澄清，请告诉我。

$moreLink = $(this).closest('.isotope').find('span.moreText')
$lessLink = $(this).closest('.isotope').find('span.lessText')

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

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>

用对角线切割背景图像的div

1 个答案: