CSS倒三角形图像叠加

Question

是否有可能做这样的事情在CSS？我想要一个头像的图像，但是我想从下一个部分切出这个三角形，以便上面的图像显示在那里。我知道如何制作一个带边框的坚实的CSS三角形（例如：http://www.dailycoding.com/Posts/purely_css_callouts.aspx），但在这种情况下，我需要做相反的事情（拿出一个“块”不在蓝色部分），或者使三角形成为与其连接的图像精确对齐的图像。我在想如果我可以把一个“大块”，可能会更容易

为了使它更复杂一点，我也有上面的图像设置为background-attachment: fixed和background-size: cover。因此，图像随着浏览器尺寸变大而变大。

如果我无法单独使用CSS并需要图像，如果文本在页面上水平居中，如何才能使图像的正确组合保持与文本一致？我想这样的事情有两个长div的延伸到边缘，以及一个准确的宽度图像中间与三角形透明：

_____________________________ ___ ______________________ _________________________ 
| (really wide for margin)|| V (960px wide image) || (really wide box again) | 

但它可以只用CSS做什么？或者有可能是SVG解决方案（我不熟悉SVG）？我很满意这个解决方案只适用于现代浏览器，因为这绝对只是“渐进式增强”。

Answer 1

下面是关于三角形边框概念的一个转折。

• 基础：http://jsfiddle.net/nhqKb/
• 更多相关：http://jsfiddle.net/nhqKb/3/

HTML

<div id="container"> 
    <div id="one"></div> 
    <div id="two"></div> 
</div> 

CSS

#container{ 
    height: 300px; 
    background-color: red; 
    position: relative; 
} 

#one { 
    position: absolute; 
    width: 100px; 
    left: 0; 
    bottom: 0; 
    border-bottom: 20px solid green; 
    border-right: 20px solid transparent; 
} 

#two { 
    position: absolute; 
    left: 120px; 
    bottom: 0; 
    right: 0; 
    border-bottom: 20px solid green; 
    border-left: 20px solid transparent; 
} 

另一种方法：我已经做了类似的CSS转换（具体来说，歪斜）。见CSS (3) & HTML Cut edge。

Answer 2

我以不同的方式处理了这个问题。不完全是想要的，但看起来不错，可能会帮助其他人。

我用z-index和border-radius达到这种效果

DEMO

HTML

<div> 
    <img src="http://lorempixel.com/500/200/sports/" class="lowerpic"/> 
    <div class="leftupperdiv"></div> 
    <div class="rightupperdiv"></div> 
</div> 

CSS

.lowerpic { 
    z-index:-1; 
    position:absolute; 
} 
.leftupperdiv { 
    z-index:1; 
    position:absolute; 
    margin-top:150px; 
    width:100px; 
    height:50px; 
    border-radius: 0px 30px 0px 0px; 
    background-color: blue; 
} 
.rightupperdiv { 
    z-index:1; 
    position:absolute; 
    margin-top:150px; 
    margin-left:100px; 
    width:400px; 
    height:50px; 
    border-radius: 30px 0px 0px 0px;  
    background-color: blue; 
} 

Answer 3

你可以不用太多额外的标记在所有使用::before和::after。你只需要在容器上使用overflow: hidden。

鉴于

<div class="hero"> 
    <img src="http://farm3.staticflickr.com/2431/3875936992_348d6dd86b_b.jpg" alt=""/> 
</div> 

的CSS将

.hero { 
    position: relative; 
    overflow: hidden; 
} 
.hero img { 
    display: block; 
    width: 960px; 
    height: auto; 
} 
.hero::before { 
    content: "\00A0"; 
    display: block; 
    border: 960px solid #fff; /* the width of the image */ 
    border-top-width: 0; 
    border-bottom-width: 0; 
    height: 30px; /* 1/2 the triangle width */ 
    width: 60px; /* the triangle width */ 
    position: absolute; 
    bottom: 0; 
    left: -630px; /* the left offset - the image width */ 
} 
.hero::after { 
    content: "\00A0"; 
    display: block; 
    border: 30px solid #fff; /* 1/2 the triangle width */ 
    border-top: 30px solid transparent; /* 1/2 the triangle width */ 
    border-bottom-width: 0; 
    height: 0; 
    width: 0; 
    position: absolute; 
    bottom: 0; 
    left: 330px; /* the left offset */ 
} 

活生生的例子：http://codepen.io/aarongustafson/full/nutDB