アイキャッチのように、画像を自由な形にトリミングする方法を解説します。
トリミングする方法として、自分でCSSを書く方法がありますが、今回は「FANCY-BORDER-RADIUS」というジェネレータを利用します。
サイトを開くと上のような画面が表示されます。
4つのポイントを操作すると、「border-radius：」の数値が変化します。
形が決まったら、「COPY」ボタンをクリックします。
「Custom size」にチェックをいれると、サイズを指定する事ができます。
コードをコピーしたらCSSで指定します。
HTML
<img src="dog.jpg" class="dog">
CSS
.dog {
border-radius: 39% 61% 73% 27% / 61% 38% 62% 39%;
}
border-radius: 39% 61% 73% 27% / 61% 38% 62% 39%;
}
ジェネレータを利用する事で簡単にトリミング出来ます。