html - html中的“图层”，透明部分

Question

我想要这个:http://gyazo.com/0fe69e349ed5cd4e72a08ed8e60af5d4
但我无法实现它。
我无法更改图像。 我使用图像作为蒙版，但这给了我这个:http://gyazo.com/b69e840d095212bce422252cec081fe9
有没有办法让侧面也变白？

我的代码:

#section1{
    height:275px;
    width:100%;
    background-image: url('/img/paral1.jpg');
    background-position: center top;
    background-repeat:no-repeat;
    background-size: 100% 916px;
}
.overlay{
    position: absolute;
    margin-top:180px;
    height:100px;
    width:100%;
    overflow: hidden;

}
.mask{
    margin: 0 auto;
    background-image: url('/img/section1.png');
    height:100px;
    width:1080px;
    background-size:100% 100%;
}

编辑:JSfiddle:http://jsfiddle.net/31kxqmLt/
全屏JSfiddle:http://jsfiddle.net/31kxqmLt/embedded/result/
编辑编辑: mask 的宽度必须为 1080px，其余空间应为白色。

Answer 1

我制作了您想要制作的形状的 Html/css 示例。

它使用背景图像、伪元素和skewX来给出左下和右下的透明剪切效果。它也具有响应能力:

<强> DEMO

输出:

.wrap {
    width:100%;
    padding-bottom:30%;
    position:relative;
}
.wrap:before {
    content:'';
    background-image: url(http://i.imgur.com/ug3M32a.jpg);
    background-size:100% auto;
    position:absolute;
    width:100%;
    left:0;
    height:50%;
}
.b{
    position:absolute;
    bottom:0;
    width:50%; height:50%;
}
.l{
    left:5%;
    transform-origin: 0 0;
    transform: skewX(45deg);
    overflow:hidden;
    border-bottom-left-radius:3%;
}
.r{
    right:5%;
    transform-origin: 100% 0;
    transform: skewX(-45deg);
    overflow:hidden;
    border-bottom-right-radius:3%;
}
.l:before, .r:before{
    content:'';
    display:block;
    width:100%; height:100%;
    background-size: 200%;
    background-image: url(http://i.imgur.com/ug3M32a.jpg);
}
.l:before{
    background-position: 10% -100%;
    transform-origin: 0 0;
    transform: skewX(-45deg);
}
.r:before{
    background-position: 90% -100%;
    transform-origin: 100% 0;
    transform: skewX(45deg);
}
body {
    padding:20px 10%;
    background-image : url(http://i.imgur.com/k8BtMvj.jpg);
    background-size:cover;
}

<div class="wrap">
    <div class="b l"></div>
    <div class="b r"></div>
</div>