Html/html5矩形z-index

Question

是否可以使用HTML或HTML5創建以下場景？

在附圖中： 「A」是圖像疊加。 「B + C」是一個內容區域。

目前我已經位於「A」使用絕對DIV與背景， 的問題是所有「B」線（藍色下方的內容）的是當然的背後「A」這樣的數據有無法訪問。

有沒有辦法解決這個問題？

Answer 1

可以使triangle with transform-rotate，使其保持它的邊界，不重疊的B元素：

DEMO（無供應商前綴）

.wrap{ 
 
    width:900px; 
 
    position:relative; 
 
    overflow:hidden; 
 
} 
 
.c, .b{ 
 
    width:20%; 
 
    float:right; 
 
    height:200px; 
 
    background:gold; 
 
} 
 
.b{ 
 
    clear:right; 
 
    height:400px; 
 
    background:teal; 
 
} 
 
.a{ 
 
    position:absolute; 
 
    top:200px; left:0; 
 
    width:110%; height:400px; 
 
    overflow:hidden; 
 
    transform-origin:0 0; 
 
    transform: rotate(24deg); 
 
} 
 
.a img{ 
 
    width:100%; 
 
    display:block; 
 
    transform-origin:0 0; 
 
    transform: rotate(-24deg); 
 
}

<div class="wrap"> 
 
    <div class="c"></div> 
 
    <div class="a"><img src="http://lorempixel.com/output/people-q-c-640-480-8.jpg" alt="" />  </div> 
 
    <div class="b"> <a href="#">link</a></div> 
 
</div>