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

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

image

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

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

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

Я думал по линиям позиционированного и повернутого 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.