Help us understand the problem. What is going on with this article?

CSSで画像を八角形に切り抜く

More than 1 year has passed since last update.

画像をどうしても変わった形で切り抜きたくって、
試行錯誤と表示崩れのご指摘いただきながらも、なんとか完成させれたのでメモメモ。

完成した形

画像を背景に指定して、八角形に切り抜く。
スクリーンショット 2016-10-20 4.21.52.png

作り方と考え方

STEP1 : キホンの要素を作り、正方形にしたdivに写真を入れる

  • htmlに入れ子になった3つクラスを準備する
<div class="photo_wrap">
 <div class="photo">
    <div class="photo_frame"></div>
 </div>
</div>
  • 真ん中のdivのサイズを指定し、正方形にする。
  • 背景に画像を指定する。
  • 画像の表示サイズをcoverにする。
.photo_wrap {
}

.photo {
  width: 200px;
  height: 200px;
  background-image: url("http://urx.red/up2U");
  background-size: cover;
}

.photo_frame {
}

こんな感じ
スクリーンショット 2016-10-20 4.06.42.png

STEP2 : 2つの正方形である、写真と枠線を重ねて八角形を作る

  • .photoに枠線をつけます。ちょっと太めに。
  • position: relative;を指定する。
.photo_wrap {

}
.photo {
  width: 200px;
  height: 200px;
  background-image: url("http://urx.red/up2U");
  background-size: cover;

  border: 20px solid #fbfaf6;
  position: relative;
}
.photo_frame {
}

次に、写真に重ねるための枠線を作ります

  • photo_frameを幅と高さを100%にして正方形にする。
  • 写真に対してぴったり中央揃えにしたいのでpositionはabsoluteに。top:50%left:50%;指定。
  • borderを指定して枠線を作る。ガッツリ太めに。
  • 45度傾けます。
.photo_frame {
  width: 100%;
  height: 100%;
  position: absolute;
  top:50%;
  left: 50%;
  border: solid 80px #fff;
  transform: translate(-50%,-50%) rotate(45deg);
}

ここまででこんな感じになるはず。
スクリーンショット 2016-10-20 4.15.26.png
八角形が見えてきました。

STEP3 : はみ出した余計な部分を隠す

ここでやっと.photo_wrapの出番です。

  • overflow: hidden;を指定しはみ出しを隠す
.photo_wrap {
  overflow: hidden;
}
.photo {
  width: 200px;
  height: 200px;
  background-image: url("http://ur0.link/ujc9");
  background-size: cover;

  border: 20px solid #fff;
  position: relative;
}
.photo_frame {
  width: 100%;
  height: 100%;
  position: absolute;
  top:50%;
  left: 50%;
  border: solid 80px #fff;
  transform: translate(-50%,-50%) rotate(45deg);
}

スクリーンショット 2016-10-20 4.18.45.png

あとはお察しの通りborderを背景色と同じ色にすればきれいな八角形になります!完成!
スクリーンショット 2016-10-20 4.21.52.png

ちょっと応用とか余談

八角形にこだわらず.photo_frameのサイズを調節すれば枠のサイズを変えれるのでアレンジできるので
応用できることを頭に入れとくと使えるかも。border消してみたり。などなど。

スクリーンショット 2016-10-20 4.43.50.png

.photo_wrap {
  overflow: hidden;
}
.photo {
  width: 200px;
  height: 200px;
  background-image: url("http://ur0.link/ujc9");
  background-size: cover;

  //border: 20px solid #fff;
  position: relative;
}
.photo_frame {
  width: 120%;
  height: 120%;
  position: absolute;
  top:50%;
  left: 50%;
  border: solid 80px #fff;
  transform: translate(-50%,-50%) rotate(45deg);
}

参考

CSSで画像の四隅に三角をつけてイイカンジの枠組みっぽくする
ここをベースに考えさせてもらいました。あとわかりやすかったので、文章の構成も参考にさせてもらいました!ありがとうございますー!

cotolier_risa
良いと思ってもすぐ忘れるのでQiitaに記録していけたらなぁと思います。 ミスや不具合等ありましたらお気軽にご指摘いただけると助かります。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away