CSSで、写真の角を差し込んだフォトフレームのような見た目を再現してみようと思います。

実装

See the Pen Photo frame by Yoriyasu Nishimura (@yori3) on CodePen.

解説

htmlは外側の枠であるframeというクラス名のdivタグとその内側に画像を入れるboxというクラス名のdivタグで構成されています。

boxクラスの擬似要素で白背景で1辺だけborderをつけた正方形を作り、それぞれ斜めに回転させて、画像にやや重なるように右上と左下に配置しています。それにより写真が切り込みに差し込んで固定されているような表現になります。

ポイントとしては切り込み（擬似要素の辺）の長さが画像から少しだけはみ出るようにすることで、リアリティが出るかと思います。

まとめ

以前、いろいろサイトを見てたときに見つけたものを自分で再現してみました。

ギャラリー的な要素などで利用できそうな小技なので、覚えておいて損はなさそうです。