Угол 45 градусов + тень блока — использование только CSS

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

изображение

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

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

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

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

Есть идеи?


html css css-shapes
person Sam    schedule 05.11.2010    source источник

Ответы (4)


arrow_upward
28
arrow_downward

Есть что-то под названием наждачная бумага, который может помочь вам преобразовать ваши элементы даже в 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*/
}

И спасибо Джошу и Роберту за оперный эквивалент:

-o-transform: rotate(45deg);

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

person Kyle    schedule 05.11.2010
comment
-o-transform: rotate(45deg); — эквивалент Opera. - person Robert; 05.11.2010
comment
Для этого IE8 нужен -ms-filter: "..", а IE9 нужен -ms-transform: rorate(45deg);. - person vdboor; 29.05.2012

arrow_upward
1
arrow_downward

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

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

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

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

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

person Robert    schedule 05.11.2010

arrow_upward
1
arrow_downward

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

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

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

person Davis Peixoto    schedule 05.11.2010
comment
Я могу согласиться, что меня проголосовали против. Справедливо, когда ответ не подходит, не решает проблему или вообще является плохим ответом в любом случае. Но когда мы пытаемся ответить серьезно и проголосовали без комментариев, чтобы сообщить нам, что пошло не так, это просто грустно. Все здесь пытаются чему-то научиться, в том числе и я. Комментарий может быть очень ценным в этом вопросе. - person Davis Peixoto; 05.11.2010
comment
Я не минусовал, но не уверен, какое отношение речевые пузыри имеют к повороту CSS. Кроме того, он использует CSS3 в демонстрации. - person Robert; 05.11.2010
comment
Я никого не обвиняю. Просто выразил то, как любой пользователь может справедливо внести свой вклад, и что я чувствую, когда такое происходит. Возвращаясь к URL-адресу, который я отправил, да, он использует CSS 3 для круглых пузырей, но только CSS 2.1 для треугольных пузырей. Вся идея, с которой я столкнулся, заключалась в использовании техники треугольника для создания рисунка, который вы хотите. Эта техника безопаснее ИМХО. Ну, я думаю, теперь вы поняли идею. - person Davis Peixoto; 05.11.2010
comment
@Dave Ни в одном из этих примеров не используется box-shadow. Довольно веская причина для минуса. - person AlxVallejo; 31.01.2018

arrow_upward
1
arrow_downward

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

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

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

person zzzzBov    schedule 05.11.2010
comment
тень будет вокруг всего блока DIV, показывая какой-то Predator FX. - person headkit; 23.10.2013