5

Вопрос по html, css, css-shapes, css3 – CSS (3) и HTML Cut edge

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

<span>Существующий ответ уже очень хороший, и этоЭто также довольно долго, так как вопрос был задан, но вы также могли бы взглянуть на<a href="http://stackoverflow.com/questions/15724678/creating-an-isoceles-trapezoid-shape">этот ответ</a> для другого подхода (должен быть адаптирован к этому вопросу).</span>

от Harry

2 ответа

1

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

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

8

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

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

The top bar
#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 (неt перекос), 9, 10, FF и Chrome. Обратите внимание, что я бы, вероятно, немного переставил разметку, чтобы она была чище для окончательного решения (лучше имена классов и / или идентификаторы), и расположил бы все пропорционально.

Похожие вопросы