円形トリミング

画像を円形にトリミングするには、通常はイラストレータ等の画像編集ツールを使って、予め画像加工した後、HPにアップロードするのが普通のやり方です。
本日は、CSSとHTMLで直接画面に貼り付ける方法がありますので紹介します。

以下の画像の右側が円形にトリミングした結果の画像ですが、正円になっていない画像があります。原因はトリミング前の元の画像が正四角形になっていないためです。同じ画像の下段側に正四角形から正円に切り取った結果を載せてあります。

結論を言うと、元の画像が正四角形ならトリミング結果は正円になると言うことです。