Угол 45 градусов + Тень теней - Использование ничего, кроме CSS

Мне нужно воссоздать следующий проект, используя только CSS:

То, что вы видите на картинке, является верхней частью контейнера веб-сайта - "ссылки" являются частью главного меню.

Как бы то ни было, я создал контейнер, но я не уверен, как сделать наклон в навигации без использования изображения.

Для записи: я бы предпочел не использовать изображение, поскольку шансы теневого окна на наклонном совпадении с теневым тэгом, отображаемым браузером, невелики, особенно когда речь идет о нескольких браузерах.

Я думал по линиям позиционированного и повернутого div с белым фоном и тень коробки, но я еще не смог его создать.

Любые идеи?

Ответ 1

Есть что-то называемое Наждачная бумага, которая может помочь вам преобразовать ваши элементы, даже в IE!

.myDiv {
    -sand-transform: rotate(45deg);
}

Вы можете просто подключить его к своему сайту и установить.

Также вы можете использовать преобразования CSS3, о которых вы задали в своем вопросе: "Использование ничего, кроме CSS".

Для этого вы должны использовать:

 .myDiv {
    -webkit-transform: rotate(45deg); 
    -moz-transform: rotate(45deg);  
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=5); /*for IE*/
}

И благодаря Джошу и Роберту для эквивалента Opera:

-o-transform: rotate(45deg);

Internet Explorer отменит ClearType на любой текст, на который применен фильтр. Но вы можете добавить пустой дополнительный элемент внутри основного и применить фильтр к этому добавочному элементу. После этого ClearType не будет разрушен, и тот же результат может быть достигнут.

Ответ 2

Для вращения вы ищете:

-moz-transform:rotate(45deg);
-webkit-transform:rotate(45deg);

Имейте в виду, что поворот является атрибутом CSS3, поэтому вы не будете получать одинаковое поведение во всех браузерах. Вместо того, чтобы делать только наклон с изображением, вероятно, лучше воссоздать весь контур. Я бы подошел к нему с помощью:

Раздел заголовка, который будет иметь наклон, тень, фон меню и прописку в верхней части содержимого, в значительной степени похож на ваш снимок экрана.
Изображение, которое может повторять по всему телу содержимого тень.
Раздел нижнего колонтитула.

Вы также можете использовать внешние библиотеки, чтобы попытаться воссоздать атрибуты CSS3, но изображения могут быть самым простым способом, поскольку вы знаете, как они будут отображаться.

Ответ 3

Я думаю, вы можете использовать методы из http://nicolasgallagher.com/pure-css-speech-bubbles/demo/

Это очень хорошая компиляция и вдохновение для использования CSS. Наслаждайтесь.

PS: это безопаснее, чем преобразования CSS3.

Ответ 4

Вращение кажется ненужным. Я бы попытался использовать эффект треугольника CSS.

Я собираюсь предположить, что ваши ссылки находятся в ul, поэтому ваш css мог бы выбрать ul:before и сделать его в правильной форме.

Я не знаю, что произойдет с box-shadow, но это может быть полезно, и, вероятно, будет легче выровнять в IE, не прибегая к JavaScript.