Required pentagon shape with right direction CSS and HTML

Question

How do i make this type of pentagone without -webkit-clip-path because its doesn\'t work most of the browser like Firefox, IE9.

Answer 1

UPDATE

You can use currentcolor to hack the background-image.

*{
    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
}

You can use Pseudo-elements - CSS

div{
  width: 200px;
  height: 200px;
  background: green;
  position: relative
    
}
div:before{
  content: '';
  position: absolute;
  top: 0;
  left: 100%;  /*We put it 100% far from left so that it start at the eage of the right border*/
  border-top: 100px solid transparent;
  border-bottom: 100px solid transparent;
  border-left: 50px solid green; /*set the width of your triangle and border-left beause we want the triangle to point in the right direction */
}

You can always check the compatibility tables for support of HTML5, CSS3, SVG and other technologies in various browsers on caniuse.com