前回の記事に引き続き、菱形についての話題。好きです菱形!!

今回は、CSSのみで画像を菱形に切り抜く方法です。そんなに難しいことではないんですが、ちょっと躓いたところがあったので、ポイントとかも含めてブログに残しておきたいと思います。

transform:rotateで作った菱形で切り抜く

CSSのみで画像を菱形に切り抜く方法なので、当然、菱形もCSSで作ったものを利用します。前回の記事で3番目に紹介した、transform:rotateで作成した菱形を利用します。

なお、画像についてはCSS(背景画像 = background)ではなく、HTML(img要素)にて表示させたものを切り抜きます。

使用する画像とデモ

画像は以下の正方形の画像を使用します。

今回の方法では、画像は正方形でないと上手くいきません。長方形(横長)でもできないことはないですが、縦横の比率によって調整が必要だったり、大きさを調整できなかったりで、ちょっと厄介なので、この方法を用いる場合には、正方形の画像を用意したほうがいいと思います。

デモページは以下のリンクからご覧になれます。

DEMO PAGE

菱形で切り抜く

まずはスタンダードに菱形に切り抜いただけのものです。

菱形で切り抜いたデモ

HTML

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

HTMLは至って普通で、画像をdivで囲んでいるだけです。

CSS

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

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

親要素の overflow: hidden で、菱形をはみ出した部分をカットし、切り抜いたように見せていています。

重要な部分は、img要素の max-width:424px と margin:-62px 0 0 -62px。

300pxの正方形を45度回転させて菱形にしているので、菱形の横幅は正方形の対角線ということになります。300pxの正方形の対角線は約424pxで、max-width:424px の値はここからきています。これがないと、画像の横幅は親要素の300pxが基準となる為、菱形いっぱいに画像が広がらなくなります。

marginの上と左の-62pxは「(424px-300px)/2」からきていて、画像を中心にもっていく為に必要なスタイルとなります。

菱形で画像を切り抜いてリンクを張る

続いて、菱形で画像を切り抜き、そこにリンクを張ったものになります。

切り抜いてリンクを張ったデモ

HTML

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

HTMLには、当たり前ですが、a要素を追加しています。

CSS

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

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

CSSは、切り抜いただけのものと変わりありません。親要素に指定した overflow: hidden が効いているため、リンク領域も菱形をはみ出すことなく表示できています。

菱形で画像を切り抜いてリンクを張りテキストをのせる

リンクを張り、画像の上にテキストをのせたものです。

切り抜いてリンクを張りテキストをのせたデモ

HTML

<div class="diamond">
  <a href="#">
    <div class="diamond__txt">
      <p>テキスト</p>
    </div>
    <img src="画像のURL" alt="">
  </a>
</div>

img要素の前にテキストを入れていますが、後ろでも問題はありません。テキストをdiv要素で囲むのは、ホバー時に背景色をつけるためです。

CSS

.diamond {
  position: relative;
  width: 300px;
  height: 300px;
  margin: 62px auto;
  overflow: hidden;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

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

.diamond__txt {
  position: absolute;
  top: 0;
  left: 0;
  width: 300px;
  height: 300px;
  -webkit-transition: all .5s ease;
  transition: all .5s ease;
  z-index: 1;
}

.diamond__txt p {
  width: 300px;
  height: 300px;
  line-height: 300px;
  color: #fff;
  font-size: 30px;
  -webkit-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

a:hover .diamond__txt {
  background: rgba(0,0,0,.5);
}

少し分かりづらいですが、テキストを囲むdiv要素は菱形のままで、p要素(テキスト)を-45度して、水平に戻しています。こうすることで、ホバー時の背景色をいい感じにすることができます。

マウスホバー時のアニメーションを付加したもの

最後に、ちょっとしたアニメーションを追加したバージョン。マウスホバーでテキストが上からおりてきます。

アニメーションを追加したデモ

HTML

<div class="diamond">
  <a href="#">
    <div class="diamond__txt">
      <h2>タイトル</h2>
      <p>テキスト</p>
    </div>
    <img src="画像のURL" alt="">
  </a>
</div>

HTMLは、h2タグを追加しただけで、テキストをのせたものとほとんど変わりありません。

CSS

.diamond {
  position: relative;
  width: 300px;
  height: 300px;
  margin: 62px auto;
  overflow: hidden;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

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

.diamond__txt {
  position: absolute;
  top: 0;
  left: 0;
  width: 300px;
  height: 300px;
  background: #F37E1D;
  -webkit-transform: translate(-300px, -300px);
  -ms-transform: translate(-300px, -300px);
  transform: translate(-300px, -300px);
  -webkit-transition: all .5s ease;
  transition: all .5s ease;
  z-index: 1;
}

.diamond__txt h2,
.diamond__txt p {
  position: absolute;
  top: 0;
  left: 0;
  width: 300px;
  height: 300px;
  color: #fff;
  font-size: 30px;
  -webkit-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.diamond__txt h2 {
  line-height: 250px;
}

.diamond__txt p {
  line-height: 350px;
}

a:hover .diamond__txt {
  -webkit-transform: translate(0,0);
  -ms-transform: translate(0,0);
  transform: translate(0,0);
}

テキスト(h2とp)は、line-heightで縦位置の調整をしています。テキストを囲むdiv要素に transform: translate(-300px, -300px) を指定して枠外に飛ばし、マウスホバーで定位置に戻ってくるようにしています。

---

余談：テキストを回転さると環境やブラウザによって、マウスホバー時にテキストがちらついてしまうのですが、これの解決方法が分かりません。winで見るとより顕著に現れるんですよね。何とかしたいんですが…

おわりに

以上、CSSのみで画像を菱形に切り抜く方法でした。同じように、グラデーション(linear-gradient)を利用して切り抜く方法もありますが、今回紹介した方法のほうが、リンクを張ったときにはみ出すことなくできるので、とてもスマートです。たぶん。

「CSSのみで画像を菱形に切り抜く」という需要が、果たしてあるのかどうか分かりませんが、参考になれば幸いです。