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