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

You could directly use 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;
}

---

Using an image instead of a solid color.

---

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;
}

---

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;
}