45 градусов угол + Box Shadow - Использование только CSS - PullRequest
Новая
       10

45 градусов угол + Box Shadow - Использование только CSS

18 голосов
/ 05 ноября 2010

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

image

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

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

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

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

Есть идеи?

Ответы [ 4 ]

28 голосов
/ 05 ноября 2010

Существует нечто, называемое Наждачная бумага , которое может помочь вам преобразовать ваши элементы, даже в 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 не будет разрушен, и тот же результат может быть достигнут.

1 голос
/ 05 ноября 2010

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

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

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

1 голос
/ 05 ноября 2010

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

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

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

1 голос
/ 05 ноября 2010

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

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

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

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

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

...