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 can use this approach :

• Rotate the main element by 45deg. Add overflow: hidden; to it.
• Add a pseudo-element and un-transform it. Position it correctly within the main element.

Hover over the image to see how this works :

FIDDLE and snippet:

body {
  background: url(http://lorempixel.com/640/480);
}
div {
  height: 200px;
  width: 200px;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  transform: rotate(-45deg);
  position: relative;
  overflow: hidden;
  top: 50px;
  left: 50px;
}
div:before {
  content: "";
  position: absolute;
  left: 100px;
  height: 141px;
  width: 212px;
  display: block;
  background: url(http://i.imgur.com/mI2OFTB.jpg);
  background-size: 100%;
  transform-origin: 0% 0%;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  transform: rotate(45deg);
}
/*Just for demonstration of working*/

div:hover {
  overflow: visible;
  background: rgba(25, 50, 75, 0.6);
}

<div></div>

Output :

Answer 2

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
}

<div></div>

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

<div><div/>

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

Answer 3

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>

Answer 4

<div id="pentagon"></div>
<style>
  #pentagon {
    margin-top:45px;
    position: relative;
    width: 54px;
    border-width: 50px 24px 0px 0px;
    border-style: solid;
    border-color: red transparent;
}
#pentagon:before {
    content: "";
    position: absolute;
    height: 0;
    width: 54px;
    top: -85px;
    border-width: 0px 24px 35px 0px;
    border-style: solid;
    border-color: transparent transparent red;
}
</style>