clip-pathプロパティで画像を好きな形にくりぬく #CSS

画像にclip-パスプロパティとSVGのclipPath要素を使えば、
SVGのpathを使って任意の形で切り抜けます。
clipPath要素の子要素は circleだったりpathだったりで、すきな図形を記述し、clip-pathのurl()でidを指定すればできます。

以下のサンプルはChrome/Safariでしか動きません。
(画像は例によってCANDY GO!GO!の菜月アイルさん)

cliping.html

<!DOCTYPE html>
<html>
<head>
<title>クリッピング</title>
<style type="text/css">
img {
    -webkit-clip-path: url(#clipping);  //for Safari,Chrome
}
</style>
</head>
<body>
<img src="hello.jpg">

<svg>
  <defs>
    <clipPath id="clipping">
      <!-- 切り取りたい形を表すpath -->
      <path d="M20,20 L250,50 300,350  50,300 Z" />
    </clipPath>
  </defs>
</svg>

</body>
</html>

結果は以下です。