Edited at

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で画像の四隅に三角をつけてイイカンジの枠組みっぽくする

ここをベースに考えさせてもらいました。あとわかりやすかったので、文章の構成も参考にさせてもらいました!ありがとうございますー!