所需的五边形形状,右方向CSS和HTML

UPDATE

您可以使用currentcolor来破解背景图像.

*{
    box-sizing: border-box;
    padding: 0;
    margin: 0
}
:root{
    background: red
}
div{
    margin: 20px auto;
    background: url(http://i.imgur.com/mI2OFTB.jpg);
    background-size: cover;
    width: 300px;
    height: 200px;
    position:relative;
    color: red
}
div:before,div:after{
    content: "";
    position: absolute;
    color: currentcolor;
    right: 0;
    border-left: 100px solid transparent
}
div:before{
    border-bottom: 100px solid currentcolor;
    bottom: 0
}
div:after{
    border-top: 100px solid currentcolor
}