Edit in JSFiddle

<div class="demo">
    <img class="overlay" src="http://kz-c2.qiniudn.com/Mask.png">
    <img class="avatar" src="http://sfault-image.b0.upaiyun.com/320/339/3203390159-54c5cbae01455_articlex">
  </div>
<a class="name" href="http://github.com/qinshou">http://github.com/qinshou</a>

body {
  background-image: url(http://kz-c2.qiniudn.com/Bitmap.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  min-height: 100%;
  height: 200px;
  
  text-align: center;
}
.demo {
  position: relative;
  width: 85px;
  height: 95px;
  overflow: hidden;
  box-sizing: content-box;
  
  margin: 20px auto;
}
.overlay { // 然后不优雅的加上装饰边框
  width: 85px;
  height: 95px;
  position: absolute;
  left: 0;
  z-index: 3;
}
.avatar {
  width: 83px;
  height: 93px;
  position: absolute;
  left: 1px;
  z-index: 2;
  -webkit-mask-box-image: url(http://kz-c2.qiniudn.com/a.svg); //用mask这个把图片画出六边形，如果把.overlay移除就会发现图片其实是六边形带圆角的
}

.name {
  margin-top: -140px;
  color: #fff;
  text-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
  font-size: 12px;
  margin-top: 8px;
}