画像を六角形に切り抜く

擬似要素でborderプロパティーを使って三角形を作る要領を逆にして、それを使って画像に枠を与える。

HTML

<figure class="hexclip">
    <img src="http://lorempixel.com/320/320/">
      </figure>

画像には擬似要素を直接使えないので、何らかの要素で括る必要がある。

CSS

.hexclip {
	position: relative;
	line-height: 1;
      }

      .hexclip img {
	vertical-align: bottom;
      }

      .hexclip:before,
      .hexclip:after {
	border-right: 160px solid #fff;
	border-left: 160px solid #fff;
	display: block;
	position: absolute;
	content: "";
      }

      .hexclip:before {
	border-bottom: 90px solid rgba(255, 255, 255, 0);
      }

      .hexclip:after {
	border-top: 90px solid rgba(255, 255, 255, 0);
	bottom: 0;
      }

六角形の角度はborder-bottomとborder-topの幅で調節できる。