CSS clip-pathの使い方

画像の切り抜きなどをCSSで行いたい場合、clip-pathが便利。
ただしIEは未対応。

/* X座標、Y座標で指定した領域がクリップされる */
clip-path: polygon(100px 100px, 200px 200px, 300px 300px);

SVG要素も指定することができる。

<div class="wrapper">
  <svg width="420" height="392" class="cliped">
    <g>
      <image xlink:href="〜" width="100%" height="100%" />
    </g>
  </svg>
</div>

<svg width="0" height="0" style="position: absolute; top: 0; left: 0;">
  <defs>
    <clipPath id="svg" clipPathUnits="objectBoundingBox">
      <polygon points="0,0 1,.15 1,1 1,1 0,.85"/>
    </clipPath>
  </defs>
</svg>

<style>
.cliped, .cliped g {
  clip-path: url("#svg");
}
</style>