Вопрос в заголовке. Пробовал наложить тень как и на :before так и на обычную картинку в svg, всегда наложение тени происходит на прямоугольную область. Не уж то единственный способ размещение картинки уже с нарисованной тенью?
2 ответа 2
Суть примерно следующая — есть сам блок, квадрат — он отбрасывает тень. Поверх него элемент after — он тоже квадрат, но повернут на 45 градусов, смещен так чтоб виднелся только уголок (с помощью transform) и отбрасывает тень. Но он будет отбрасывать тень и на сам блок, а если сделать блок поверх — то блок будет отбрасывать тень на уголок. Поэтому в блоке меню делаем еще один блок — собсно, где будет всё содержимое — указываем ему position, указываем z-index чтоб он был поверх элемента after и уже далее паддинги и все остальное задаем ему.
Для этого нужно использовать CSS-фигуры.
Директива shape-outside: url(image.png) говорит браузеру, чтобы он извлёк очертания фигуры из изображения.
Свойство shape-image-threshold задаёт минимальный уровень прозрачности, при котором пикселы будут участвовать в формировании фигуры. Значение этого свойства может изменяться в диапазоне от 0.0 (полностью прозрачный) до 1.0 (полностью непрозрачный).
Всё ещё ищете ответ? Посмотрите другие вопросы с метками css или задайте свой вопрос.
Похожие
Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.
дизайн сайта / логотип © 2019 Stack Exchange Inc; пользовательское содержимое попадает под действие лицензии cc by-sa 4.0 с указанием ссылки на источник. rev 2019.11.15.35459
Так же на habrahabr есть пост «Треугольники с тенью на CSS»
Это то что предложил: @DeLaVega, только в обход гугла =)
Сами фигуры на CSS — это не универсальное решение. по этому и решение есть не универсальное.
В общем ссылка на саму статью.
Небольшой пример для webkit из статьи «Геометрические фигуры на CSS»
В опера 12.11. даже геометрические фигуры отображаются ужасно!
Есть 2 варианта:
1. Удалить оперу
2. Установить версию >= 15.0 (т.к. с 15 версии opera на webkit движке)
=)
На сайтах треугольники применяются сплошь и рядом как часть дизайна элементов, например, они служат указателем на какой-то объект, направляя внимание читателя в нужное место. Также треугольники выполняют декоративные функции, делая блоки, где они применяются, более изящными и современными. На рис. 1 показан пример использования треугольника в дизайне.
Рис. 1. Треугольники в веб-дизайне
Напрямую сделать треугольник средствами CSS нельзя, поэтому доступны два метода, позволяющих его добавить — через border и transform .
Использование border
Хотя границы, создаваемые через свойство border , напрямую не имеют отношения к треугольникам, именно border используется для этого наиболее часто. Если задать нулевую ширину и высоту элемента, а также установить достаточно толстую границу, то мы увидим набор из четырёх треугольников (рис. 2). Для наглядности границы на всех сторонах установлены разного цвета.
Рис. 2. Добавление border к элементу
Оставляя только нужную границу, а остальные делая прозрачными, мы получим треугольник нужного цвета (рис. 3).
Рис. 3. Элемент с прозрачными границами
В примере 1 показано добавление треугольника к блоку через псевдоэлемент ::after .
Пример 1. Блок с треугольником
Для абсолютно позиционированных элементов нулевую ширину и высоту указывать не обязательно.
За счёт комбинирования границ можно получить ещё четыре вида треугольников, что в сочетании с уже упомянутыми даёт нам восемь вариантов. Их вид и требуемый код приведён в табл. 1.
| Вид | Стиль |
|---|---|
| border: 20px solid transparent; border-top: 20px solid green; | |
| border: 20px solid transparent; border-right: 20px solid green; | |
| border: 20px solid transparent; border-bottom: 20px solid green; | |
| border: 20px solid transparent; border-left: 20px solid green; | |
| border: 20px solid transparent; border-top: 20px solid green; border-right: 20px solid green; | |
| border: 20px solid transparent; border-right: 20px solid green; border-bottom: 20px solid green; | |
| border: 20px solid transparent; border-bottom: 20px solid green; border-left: 20px solid green; | |
| border: 20px solid transparent; border-left: 20px solid green; border-top: 20px solid green; |
Из таблицы видно, что невидимые границы занимают место, учитывайте это при позиционировании элементов. Стиль, также, необходимо дополнить нулевой шириной и высотой или воспользоваться свойством position, как это делалось в примере 1.
Треугольник можно делать и другой формы, если задать разную толщину границ. Так, код создания блока, показанного на рис. 4, приведён в примере 2.
Рис. 4. Острый треугольник
Пример 2. Острый треугольник
С помощью border мы получаем сплошные цветные треугольники, для создания рамки показанной на рис. 5 приходится идти на хитрость и накладывать один элемент поверх другого с небольшим смещением. Опять же здесь нам помогут псевдоэлементы :before и :after (пример 3).
Рис. 5. Рамка с уголком
Пример 3. Наложение треугольников
Из-за того, что мы накладываем один однотонный элемент поверх другого, этот способ годится только для однотонной заливки и не подходит для градиентов или фоновых картинок.
Использование трансформации
С помощью трансформации мы можем повернуть квадратный элемент на 45º и получить из него ромб. Это ещё не треугольник как таковой, поэтому нужную нам выступающую часть оставляем на виду, а остальное прячем за другим элементом (пример 4).
Пример 3. Трансформация
Результат данного примера показан на рис. 6.