Форум

ddale · #1 (**permalink**) 11.03.2014, 18:48

Привет!

Честно говоря не часто я сталкиваюсь с нерешаемыми ситуациями, но в этот раз я в тупике.

Стоит задача сверстать плашку с параметрами:
1) Тянется по высоте
2) IE9+, FF, Chrome, Opera, Safari
3) Левая и правая части растягиваются по ширине экрана
4) Центр фиксирован

Кто что думает? Может быть есть примеры личные или из сети? Прошу помощи!

http://imglink.ru/show-image.php?id=...f73afe95019949

Aetae · #2 (**permalink**) 12.03.2014, 05:09

Примерно так:

<!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>

Форум

Справочник

Discord чат

Курсы javascript