Edit in JSFiddle

<img src="http://sfault-image.b0.upaiyun.com/320/339/3203390159-54c5cbae01455_articlex" class="avatar">

body {
  background-image: url(http://kz-c2.qiniudn.com/Bitmap.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  text-align: center;
}
.avatar {
    -webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    overflow: hidden;
    width: 150px;
    height: 150%;
}
.avatar img {
    width: 100%;
    height: 100%;
}