透明三角形与固定的背景

Question

当页面具有固定的背景滚动（不是视差）时，有没有办法在第二行中实现三角形但是它是透明的，以便显示固定的背景？

即

-------------------------
this is fixed background


-----------   -----------
           \ /

second row solid colour
-------------------------

除了背景是固定图像背景的三角形之外，第二行将具有纯色。有没有办法做到这一点？

Answer 1

DEMO：http://jsbin.com/tidir/1/

http://jsbin.com/tidir/1/edit

<强> HTML

<section class="featurette"></section>

CSS：

body,html {background:#222;height:100%;padding:0;margin:0;}

.featurette {
    background: url(http://lorempixel.com/700/400/cats/);
    background-size: cover;
    background-attachment: fixed;
    background-position: center center;
    width: 100%;
    height:400px;
    position: relative;
    overflow:hidden;
}
.featurette:before,
.featurette:after {
    content: '';
    display: block;
    position: absolute;
    bottom: 0;
    height: 70px;
    margin: 0 0 0 -40px;
    transform: skew(40deg);
    background: #222;
}
.featurette:after {
    left: 50%;
    right: 0;
    margin: 0 -40px 0 0;
    transform: skew(-40deg);
}


.featurette:before {
    left: 0;
    right: 50%;
}

/* demo only */
body {height:2000px;}