CSSで画像の四隅に三角をつけてイイカンジの枠組みっぽくする

先日「こういうのってCSSで出来ないかな〜？」という話が知人といるときに出てきて、
その時に例で実装したものが割りと改変すると便利そうなコードだったのでご紹介。

目標とする形

今回作成したい形状は以下の様なものとなります。

画像を中心とし、四隅に三角を用意、それによってただの画像を額のようにする。といったものですね。

CSSで作った完成品

先に今回の完成品を上げておきます。
後にビジュアル面は改変が効くので、形状だけのワイヤーのようなものとなります。

作り方や考え方など

今回は枠線のサイズなんかが固定のようだったので、以下の方法で実装。

まずは適当に画像を配置してやり、枠線をつけておきます。
(今回は楽だったのでbackground-imageで配置しました)

style.scss

.image{
	width: 250px;
	height: 250px;
	background-image:  url("http://urx.red/up2U");
	background-size: cover;
	position: relative;
	border: solid 10px #fff;
}  

その次に、その要素の:beforeを以下のように指定。
45度に回転させた正方形を、中央に配置して、そこにボーダーを設定することで枠が完成しました。

style.scss

.image{
	// 前述のコード
	
	&:before{
		width: 130%;
		height: 130%;
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%) rotate(45deg);
		background: transparent;
		border: solid 40px #fff;
		content:"";
	}

最後に:beforeがついている方の要素にoverflow:hiddenを設定し完了。
これではみ出した部分は見えなくなるため、バッチリ枠線が完成しました。

style.scss

.image{
	overflow:hidden;
	// 残りのコード
}

こんな感じで結構簡単に要件を満たしたコードを書くことができました。

おまけ

普通に四角を配置しているところを、適当な要素をDOMに足してやって、
beforeとafterを使ってwidth, heightで指定してやれば、borderが%指定できない欠点を克服してある程度フレキシブルに作成できるほか、
そもそも見栄えを重視する場合はsvgで書きだしてbackground-imageとbackground-position辺りを利用すると、ビジュアル面もいい感じにできますので、その時その時に合わせて改変していくと良さそうです。