CSS (3) и HTML передовые технологии

Об этом уже спрашивали, но мне нужно по-другому. Пожалуйста, взгляните на изображение ниже, чтобы увидеть панель навигации, которую я пытаюсь реализовать:

навигация

Проблемы:

  • Тень по краям
  • Текст/изображения внутри панели
  • Сплошная рамка толщиной 1 пиксель вокруг фигуры была бы отличной.

Конечно, статичное изображение может сделать это, но я хотел бы использовать что-то другое. Есть ли у вас какие-либо идеи, как это сделать (с максимальной поддержкой браузера)?

EDIT: <nav> имеет абсолютное позиционирование

Вот что я сделал до сих пор

прогресс панели навигации

Но нет возможности нанести бордюр и фиксированные размеры тоже проблематичны.

    nav {
       float: left;
       position: absolute;
       background-color: #ffffff;
       top: 0;
       left: 0;
       display: inline;
       padding: 12px;
       padding-right: 0;
       width: auto;
    }

    .behind_nav {
       height: 60px;
       width: 523px;
       position: absolute;
       top: 0;
       left: 0;
       border-right: 20px solid transparent;
       border-top: 48px solid white;
    }

.behind_nav позади <nav> (сюрприз, сюрприз). На самом деле это работает хорошо, за исключением проблемы с тенью и границей, указанной выше. Также он привязан к фиксированному значению, что проблематично. <nav> соответствует ширине контента (который может отличаться из-за данных CMS/браузера)


html css css-shapes
person paulgavrikov    schedule 04.03.2013    source источник
comment
Существующий ответ уже очень хорош, и с тех пор, как вопрос был задан, прошло довольно много времени, но вы также можете взглянуть на этот ответ для другого подхода (необходимо адаптировать, чтобы он соответствовал этому вопросу).   -  person Harry    schedule 21.01.2015

Ответы (2)


arrow_upward
8
arrow_downward

Примерная демонстрация: http://jsfiddle.net/W82UV/3/

введите здесь описание изображения

Я думаю, что это охватывает суть ваших трудностей, т. е. перекос края, тень и границу.

<div id="top">
    The top bar
</div>
<div id="container">
    <div id="background">        
    </div>
    <nav>
        Test
    </nav>
</div>

#top{  
    background-color: #f0f0f0;
    border-bottom: 1px solid #555;
    box-shadow: 8px 8px 8px #aaa;
}

#container {
    position: relative;
    top: -1px;
    overflow: hidden;
    height: 96px;
}

#background {
    background-color: #f0f0f0;

    position: absolute;
    top: -1px;
    left: -32px;
    border: 1px solid #555;

    width: 400px;
    height: 64px;
    box-shadow: 8px 8px 8px #aaa;

   -webkit-transform: skew(-20deg); 
   -moz-transform: skew(-20deg); 
   -o-transform: skew(-20deg);
   -ms-transform: skew(-20deg); 
   transform: skew(-20deg);
}

Протестировано в IE 8 (не искажается), 9, 10, FF и Chrome. Обратите внимание, что я бы, вероятно, немного изменил разметку, чтобы она была чище для окончательного решения (лучшие имена классов и/или идентификаторы), и расположил все пропорционально.

person Tim Medora    schedule 04.03.2013
comment
Это действительно хорошее решение, и у меня уже было некоторое тестирование с ним, я просто хотел найти решения, которые имеют большую поддержку, чем CSS3. В любом случае, я отмечу это как решение, если мы не найдем что-то еще. - person paulgavrikov; 04.03.2013
comment
О... Я забыл, что вы можете использовать skew ! Довольно хитро. Bluewhile, я не думаю, что вы получите что-то еще, кроме CSS3 или статического изображения. В любом случае удачи! - person Orteil; 04.03.2013
comment
Хорошее предложение по префиксу -ms (другие префиксы тоже могут отсутствовать... просто пытаюсь заставить работать грубое решение). Я думаю, что с некоторыми изменениями поддерживается IE9+ и все другие современные браузеры. - person Tim Medora; 04.03.2013
comment
Единственная реальная проблема здесь — IE8 (и 7, если вы хотите его поддерживать). Тем не менее, без перекоса это выглядит неплохо; просто более квадратный. - person Tim Medora; 04.03.2013
comment
Поздравляю с достижением 20K (почти!) и очень хорошим решением! - person Wesley Murch; 04.03.2013

arrow_upward
1
arrow_downward

Похоже, статическое изображение для краев будет единственным способом (если только вы не хотите заниматься техническими вопросами и использовать холст, но это было бы глупо). Вы можете получить угловой край с повернутым блоком, но у вас возникнут проблемы с тенью. Текст внутри панели не кажется проблемой — для справки, эти панели навигации обычно реализуются в виде плоских списков.

Извините, я не мог больше помочь!

person Orteil    schedule 04.03.2013
comment
Что я мог бы сделать, так это край как отдельное изображение (включая границу и тень), но я хотел бы попробовать что-то еще, если это возможно. - person paulgavrikov; 04.03.2013
comment
Это цена обратной совместимости... вы не можете хвастаться своими крутыми новыми игрушками обездоленным детям. - person Orteil; 04.03.2013