1つの画像で4つの角を再現するCSS

  • このエントリーをはてなブックマークに追加

4つの角を1つの画像を反転して置きたいときにいつも 「どうやったらできるんだろ・・。」と悩んでました。

あるとき・・。「こうやったらできるんじゃない!?」と閃いて試してみたらできたのでコード載せておきます!


仕様

  1. :before,:afterを使って再現。(なので背景は別で使うことができます。)
  2. -webkit-box-reflectを使うため、webkit系ブラウザのみ対応(スマホサイトなど作るときに役立つ!)

CSS

sectionタグの4つ角に設定したい場合

section {
	position: relative;
}

section:before,
section:after {
	content: '';
	display: block;
	background: url('test.gif') no-repeat;
	position: absolute;
	width: 50%;
	-webkit-box-reflect: right;
	height: 15px;
}

section:before {
	top: 0;
	left: 0;
}
section:after {
	right: 0;
	bottom: 0;
	-webkit-transform:rotate(-180deg);
}

Sass,Compass用mixinも作ってますので後日ブログに書く予定です!

追記 : 書きました!

DEMO(jsdo.it)

1つの画像で4つの角を再現するCSS - jsdo.it

コメント : 0

コメントフォーム

トラックバック : 0

http://develo.org/mt/mt-tb.cgi/107

このページの先頭へ戻る