1つの画像で4つの角を再現するCSS
- Data
- 2014/05/18
- Tag
site: http://develo.org/2014/05/11/2100.html
4つの角を1つの画像を反転して置きたいときにいつも 「どうやったらできるんだろ・・。」と悩んでました。
あるとき・・。「こうやったらできるんじゃない！？」と閃いて試してみたらできたのでメモしときます。
仕様
- :before,:afterを使って再現。（なので背景は別で使うことができます。）
- -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);
}