css треугольник с тенью

Вопрос в заголовке. Пробовал наложить тень как и на :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.

Табл. 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.

Оцените статью