1つの画像で4つの角を再現するCSS kamem Follow 2014-05-11 20:26:24 License: Refer to code comments Fork0 Fav0 View1520 Play Stop Reload Fullscreen Smart Phone Readme JavaScript 0 lines HTML 9 lines CSS 36 lines 1つの画像で4つの角を再現するCSS <section> <p>ぼっくす</p> <p>ぼっくすぼっくす</p> <p>ぼっくすぼっくすぼっくす</p> <p>ぼっくすぼっくすぼっくす</p> <p>ぼっくすぼっくすぼっくす</p> <p>ぼっくすぼっくす</p> <p>ぼっくす</p> </section> 1つの画像で4つの角を再現するCSS * { margin: 0; padding: 0; border: 0; } section { margin: 0 auto; width: 300px; height: 300px; position: relative; text-align: center; background: #39c; color: #fff; } section:before, section:after { content: ''; display: block; background: url('http://develo.org/favicon.ico') 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); } <section> <p>ぼっくす</p> <p>ぼっくすぼっくす</p> <p>ぼっくすぼっくすぼっくす</p> <p>ぼっくすぼっくすぼっくす</p> <p>ぼっくすぼっくすぼっくす</p> <p>ぼっくすぼっくす</p> <p>ぼっくす</p> </section> * { margin: 0; padding: 0; border: 0; } section { margin: 0 auto; width: 300px; height: 300px; position: relative; text-align: center; background: #39c; color: #fff; } section:before, section:after { content: ''; display: block; background: url('http://develo.org/favicon.ico') 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); } use an iframe compat browser, deer Play on jsdo.it games Author Share ブログに埋め込む QR Tag Download Complete! Description What kind of game? Control Device Smartphone Controllerjsdo.it WebSocket Controller» Mouse Keyboard Touch Device Fullscreen Activated Inactivated jsdo.it games から削除する Submit Author kamem URLhttp://develo.org/ Tweet Default Panel Auto play Screenshot Readme JavaScript HTML CSS Size Width: px Height: px code <script type="text/javascript" src="http://jsdo.it/blogparts/faGs/js"></script> Discussion Questions on this code?
