前回『【CSS】CSS3でボタン作成』で紹介したように、今では画像を作ることなくCSSのスタイル指定でボタンが作れてしまいます。 これと同じように、円やひし形の画像もCSSを使って作ることができるので紹介します。 今回使う画像は↓ 可愛い子猫ちゃん、こっちへおいで。。 さて、早速本題へ! 円で切り抜く 今まではPhotoshopなどのツールで切り抜いていたかもしれませんが、そんなことする必要ありません。 HTML <div class="circle"> <img src="画像のURL" alt=""> </div> .circle{ width:400px; height:400px; border-radius:50%; overflow:hidden; } .circle img{ width:400px; height:400px; } ここでのポイントはborder-radiu