Как правильно заверстать такую плашку
Привет!
Честно говоря не часто я сталкиваюсь с нерешаемыми ситуациями, но в этот раз я в тупике. Стоит задача сверстать плашку с параметрами: 1) Тянется по высоте 2) IE9+, FF, Chrome, Opera, Safari 3) Левая и правая части растягиваются по ширине экрана 4) Центр фиксирован Кто что думает? Может быть есть примеры личные или из сети? Прошу помощи! http://imglink.ru/show-image.php?id=...f73afe95019949 |
Примерно так:
<!DOCTYPE html> <html lang="ru-RU"> <head> <meta charset="UTF-8"> <title></title> <style> *{margin:0;padding:0;} html, body{ background-image: url(http://javascript.ru/forum/image.php?u=21902&dateline=1341411354); } .footer{ margin-right: 700px; /*600+50+50*/ position: relative; top: 100px; } .container{ width: 600px; margin-left: 50%; position: relative; top: 50px; left: 50px; background-image: url(http://javascript.ru/forum/images/editor/css.png); } .footer:before, .footer:after, .container:before, .container:after { content: ''; display: block; width: 50%; height: 100%; position: absolute; top: 0; background-image: url(http://javascript.ru/forum/images/editor/css.png); } .footer:before { left: 0; } .footer:after{ right: -700px; } .container:before, .container:after { width: 50px; } .container:before{ -webkit-transform: skewY(45deg); -moz-transform: skewY(45deg); -ms-transform: skewY(45deg); -o-transform: skewY(45deg); transform: skewY(45deg); -webkit-transform-origin: 100% 0; -moz-transform-origin: 100% 0; -ms-transform-origin: 100% 0; -o-transform-origin: 100% 0; transform-origin: 100% 0; left: -50px; } .container:after{ -webkit-transform: skewY(-45deg); -moz-transform: skewY(-45deg); -ms-transform: skewY(-45deg); -o-transform: skewY(-45deg); transform: skewY(-45deg); -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; right: -50px; } </style> </head> <body> <div class="footer"> <div class="container"> <span style="line-height: 400px">content</span> </div> </div> </body> </html> |
Часовой пояс GMT +3, время: 05:26. |