小技集

【CSS】画像を円やひし形に切り抜いて表示させる方法

  • このエントリーをはてなブックマークに追加

前回『【CSS】CSS3でボタン作成』で紹介したように、今では画像を作ることなくCSSのスタイル指定でボタンが作れてしまいます。
これと同じように、円やひし形の画像もCSSを使って作ることができるので紹介します。

今回使う画像は↓

切り抜く画像

可愛い子猫ちゃん、こっちへおいで。。


さて、早速本題へ!

円で切り抜く

今まではPhotoshopなどのツールで切り抜いていたかもしれませんが、そんなことする必要ありません。

円で切り抜いた画像

HTML

<div class="circle">
    <img src="画像のURL" alt="">
</div>

CSS

.circle{
  width:400px;
  height:400px;
  border-radius:50%;
  overflow:hidden;
}

.circle img{
  width:400px;
  height:400px;
}

ここでのポイントはborder-radius:50%;とoverflow:hidden;になります。
border-radiusは角を丸くするスタイルで、50%を指定することで円を作ります。
そして、overflow:hidden;で円からはみ出た画像部分を消せば完成です。

ひし形で切り抜く

ひし形はあまり見かけませんが、これもCSSでできてしまいます。
アイキャッチ画像をひし形で切り抜いたりするとオシャレですね!

ひし形に切り抜いた画像

HTML

<div class="diamond">
    <img src="画像のURL" alt="">
</div>

CSS

.diamond {
  width: 400px;
  height: 400px;
  margin: 83px auto;
  overflow: hidden;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

.diamond img {
  max-width: 566px;
  margin: -83px 0 0 -83px;
  -webkit-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

ここでのポイントはtransformです。
これは角度を変えるスタイルになるのですが、.diamondに対して正の方向へ45度回転させるCSSをあてています。それと同時に子要素の画像も回転します。
それを戻すために子要素である画像には負の方向に45度回転させるCSSをあてています

また、画像に対するmarginの指定がきになるかもしれませんが、これは中心をそろえるための指定です。
回転させてできたひし形の対角線は566pxとなるので、(566-400)÷2=83の計算式からmarginの値を算出しています。

まとめ

円とひし形以外にも任意の形で切り抜くことはできますし、ここから応用を効かせてテキストを配置することも可能です。
上記のものは基本のスタイルになるので、必要に応じてカスタマイズすることで、デザイン性をアップさせることもできると思います。

  • このエントリーをはてなブックマークに追加

コメントを残す

*

CAPTCHA