JSFiddle - React, Tailwind, and code Playground

by Kheema Pandey

HTML

<div class="container">
    <div class="avatar">
      <img class="pentagon" src="http://25.media.tumblr.com/tumblr_m5nre6cxkQ1qbs7p5o1_r1_500.jpg" alt="" />
    </div>
</div>

<svg>
    <defs>
        <clipPath id="pentagon" clipPathUnits="objectBoundingBox">
            <polygon points=".5,0 1,.30 .2,1 .2,1 0,.30" />
        </clipPath>
   </defs>
</svg>

CSS

.pentagon {
  -webkit-clip-path: polygon(0px 0px, 100px 0px, 112px 13px, 240px 13px, 240px 250px, -250px 250px);
  -o-clip-path: polygon(0px 0px, 100px 0px, 112px 13px, 240px 13px, 240px 250px, -250px 250px);
  -ms-clip-path: polygon(0px 0px, 100px 0px, 112px 13px, 240px 13px, 240px 250px, -250px 250px);
  float:left;
}

.avatar {
  margin-top: 50px;
}

html {
  text-align: center;
  min-height: 100%;
  background: linear-gradient(white, #ddd);
}
.container { position:relative; width: 240px; height: 500px; left: 50%;
top: 50%; }
h1, p {
  color: rgba(0,0,0,.3);
}