自由な形に画像の切り抜きができるSVGのclip-path polygonを CSSで行う | 9ineBBCSSで画像の切り抜きをする 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
