对角地切割背景图片的div

问题描述：

我正在尝试创建一个利用对角线部分的网站。 I am trying to get this kind of angle.对角地切割背景图片的div

我还需要全面的浏览器支持。我已经看到了很多与多边形修复，我已经尝试旋转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>

我一直想这一点http://jsfiddle.net/UYRFY/2713/但角度不是我需要它的方向，我有一个很难改变它是正确的方式。 –

它看起来像你有什么你需要的，只需要扭转角度 – Huangism

答

本例中的代码只能在“现代”的浏览器，但如果添加浏览器前缀，我相信可以工作回到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

相关推荐