您可以使用CSS3 triangle technic,并通过组合：before和：after伪对象来制作倒置形状,每个对象绘制三角形的一部分.

你可以这样做：

.image {
    position:relative;
    height:200px;
    width:340px;
    background:orange;
}
.image:before,.image:after {
    content:'';
    position:absolute;
    width:0;
    border-left:20px solid white;
    left:0;
}
.image:before {
    top:0;
    height:20px;
    border-bottom:16px solid transparent;
}
.image:after {
    top:36px;
    bottom:0;
    border-top:16px solid transparent;
}

这是一个说明性的jsfiddle

我只是用一个平面橙色背景作为例子……但是你可以把它改成图像,你希望得到你想要的东西=)

编辑：然后更多的最终结果可能是像this