CSSで画像の切り抜きをする SVG の ClipPath で polygon というものがあり 3点以上の座標をX点とY点で指定することで、その領域を切り抜くことが出来ます 画像編集ソフトでクリッピングするようなものです これを CSS で行うことが出来ます img要素やdiv要素に適応出来て画像をそのまま切り抜きが出来ます 使うのは clip-path: polygon(); polygon() のなかに座標を入れていきます 座標はpxで指定 -webkit-clip-path: polygon(103px 17px,235px 81px,214px 287px,28px 246px,26px 63px); 座標は%での指定でも可能です それぞれの座標は XとYはスペースで区切り カンマで一つの座標を区切ります DEMO (Chrome、operaでのみ動作確認してます) clip-p
![自由な形に画像の切り抜きができるSVGのclip-path polygonを CSSで行う | 9ineBB](https://cdn-ak-scissors.b.st-hatena.com/image/square/3246a60e34fc8a244b831f07fc033cb22e492fa5/height=288;version=1;width=512/https%3A%2F%2F9-bb.com%2Fwp-content%2Fuploads%2F2014%2F08%2F84175074a82ada181de779599b108669.png)