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.

My code: http://codepen.io/anon/pen/MYbKrQ

div {
  width: 150px;
  height: 150px;
  background: #1e90ff;
  -webkit-clip-path: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%);
  clip-path: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%);
}

/* Center the demo */
html, body {
  height: 100%;
}
body {
  display: flex;
  justify-content: center;
  align-items: center;
}

<div></div>

Answer 1

You could directly use svg.

<svg width="150" height="150">
  <path d="M0,0 h125 l25,75 l-25,75 h-125z" fill="#4275FF" />
</svg>

---

You could make use of svg's clipPath and foreignObject to import the div into svg element and apply inline clipPath for cross-browser support.

Browser Support for this approach

div {
  width: 150px;
  height: 150px;
  background: #4275FF;
}

<svg width="150" height="150">
  <defs>
    <clipPath id="shape">
      <path d="M0,0 h125 l25,75 l-25,75 h-125z" />
    </clipPath>
  </defs>
  <foreignObject clip-path="url(#shape)" width="100%" height="100%">
    <div></div>
  </foreignObject>
</svg>

---

Using an image instead of a solid color.

<svg width="150" height="150">
  <defs>
    <clipPath id="shape">
      <path d="M0,0 h125 l25,75 l-25,75 h-125z" />
    </clipPath>
  </defs>
  <image clip-path="url(#shape)" xlink:href="http://www.lorempixel.com/150/150/" width="100%" height="100%" />
</svg>

---

Alternatively, you could use a triangle on :after :pseudo-element.

div {
  position: relative;
  width: 125px;
  height: 150px;
  background: #4275FF;
}
div:after {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  border-top: 75px solid transparent;
  border-bottom: 75px solid transparent;
  border-left: 25px solid #4275FF;
  right: -25px;
}

<div></div>

---

Adding an image instead of a solid color using CSS.

#main-container {
  width: 150px;
  height: 150px;
  overflow: hidden;
}
#container,
#shape {
  position: relative;
  width: 200px;
  height: 195px;
  transform: rotate(-20deg) translate(-46px, -40px);
  overflow: hidden;
  -webkit-backface-visibility: hidden;
}
#shape {
  position: relative;
  height: 500px;
  transform: rotate(40deg) translateY(-50%);
  left: -219px;
  top: 112px;
}
#shape:after {
  position: absolute;
  content: '';
  width: 150px;
  height: 150px;
  background: url(http://lorempixel.com/150/150);
  transform: rotate(-20deg);
  margin: 70px 0 0 52px;
}

<div id="main-container">
  <div id="container">
    <div id="shape">
    </div>
  </div>
</div>