Html / html5矩形z-index

Question

是否可以使用HTML或HTML5创建以下方案？

在附图中： ＆＃34; A＆＃34;是图像叠加。 ＆＃34; B + C＆＃34;是一个内容区。

目前我已定位＆＃34; A＆＃34;使用带背景的绝对div， 问题是＆＃34; B＆＃34; （蓝色下面的内容）线当然是＆＃34; A＆＃34;所以数据无法访问。

是否可以选择克服此问题？

Answer 1

您可以制作triangle with transform-rotate以保持其边界并且不会与B元素重叠：

DEMO （无供应商前缀）

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;