Угол 45 градусов + коробка тень - используя ничего, кроме CSS
-
29-09-2019 - |
Вопрос
Мне нужно воссоздать следующий дизайн, используя только CSS
:
То, что вы видите на картинке, - это верхняя часть контейнера сайта - «Ссылки» являются частью главного меню.
Как он стоит, я создал контейнер, но я не уверен, как сделать наклон на навигацию без использования изображения.
Для записи: Я бы предпочел не использовать изображение, так как шансы на коробку тени на наклоне, соответствующие коробку, представленные браузером, тонкие, особенно когда речь идет о нескольких браузерах.
Я думал по линии позиционированного и повернутого Div с белым фоном и коробкой тенью, но я еще не смог построить его.
Любые идеи?
Решение
Там что-то называется Наждачная бумага Это может помочь вам преобразовать ваши элементы даже в 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 будет не разрушен, и тот же результат может быть достигнут.
Другие советы
Для вращения вы ищете:
-moz-transform:rotate(45deg);
-webkit-transform:rotate(45deg);
Имейте в виду, что вращение является атрибутом CSS3, поэтому вы не собираетесь получить то же поведение во всех браузерах. Вместо того, чтобы сделать только уклон с изображением, возможно, было бы лучше воссоздать весь план. Я бы подошел к этому с:
- Секция заголовка, у которого будет наклон, тень, фон меню и прокладки в верхней части содержимого, в значительной степени похоже на ваш скриншот.
- Изображение, которое может повторить - Y по всему корпусу содержания с тенью.
- Раздел нижнего колонтитула.
Вы также можете использовать внешние библиотеки, чтобы попытаться воссоздать атрибуты CSS3, но изображения могут быть самым простым способом, как вы знаете, как они будут оказывать.
Я думаю, что вы можете использовать методы из http://nicolasgallagher.com/pure-css-speeCh-bubbles/demo/
Это действительно хорошая компиляция и вдохновение для использования CSS. Наслаждаться.
PS: Это безопаснее, чем трансформации CSS3.
Ротация кажется ненужным. Я бы попробую использовать эффект треугольника CSS.
Я собираюсь полагать, что ваши ссылки находятся в ul
Таким образом, ваши CSS могут выбрать ul:before
и сделать это в правильную форму.
Я не знаю, что произойдет с box-shadow
Но это может стоить выстрела, и, вероятно, будет легче выровнять в IE, не прибегая к JavaScript.