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

StackOverflow https://stackoverflow.com/questions/4105772

  •  29-09-2019
  •  | 
  •  

Вопрос

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

image

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

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

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

Я думал по линии позиционированного и повернутого 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, поэтому вы не собираетесь получить то же поведение во всех браузерах. Вместо того, чтобы сделать только уклон с изображением, возможно, было бы лучше воссоздать весь план. Я бы подошел к этому с:

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

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

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

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

PS: Это безопаснее, чем трансформации CSS3.

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

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

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

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top