Как правильно заверстать такую плашку
Привет!
Честно говоря не часто я сталкиваюсь с нерешаемыми ситуациями, но в этот раз я в тупике. Стоит задача сверстать плашку с параметрами: 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, время: 13:22. |