Как сделать такую фигуру с тенями?

@xDanbo · Регистрация: 12.04.2014

Студворк — интернет-сервис помощи студентам

Как при помощи CSS сделать такой треугольник с тенями вместе с остальной частью, на которой тоже есть тень?

@mytilus · 19.09.2015, 18:20

Если CSS3, то clip-path и box-shadow. Но для совместимости я сделал бы с помощью <svg>.

@xDanbo · 19.09.2015, 18:57 **[ТС]**

mytilus, я попытался с помощью этого генератора http://cssplant.com/clip-path-generator сделать похожую фигуру, но почему-то она не выводится. Не подскажете, в чем ошибка? http://codepen.io/xDanbo/pen/xwOKWw

А постойте-ка, надо же еще сам div добавить.

Добавил, но видно только половину фигуры.

@Sn1p3rOk · 19.09.2015, 19:21

Сообщение от xDanbo

Добавил, но видно только половину фигуры.

Как нарисовали так и видно

@xDanbo · 19.09.2015, 19:24 **[ТС]**

Sn1p3rOk, в генераторе это выглядит так:

@Sn1p3rOk · 19.09.2015, 19:35

Сообщение от xDanbo

в генераторе это выглядит так:

Ну я вот без генератора нарисовал и получилось все http://codepen.io/anon/pen/xwOKQV

HTML5
1
2
3
<svg height="210" width="500">
  <polygon points="10 10, 10 100, 75 150, 150 100, 150 10" style="fill:lime;stroke:purple;stroke-width:1" />
</svg>

@xDanbo · 19.09.2015, 19:38 **[ТС]**

Sn1p3rOk, через clip-path и я нарисовал, но только в живом проекте его не применишь, нужна совместимость со всеми браузерами. Как это через SVG реализовать?

@Sn1p3rOk · 19.09.2015, 23:07

Сообщение от xDanbo

Как это через SVG реализовать?

Например так http://codepen.io/anon/pen/xwOKQV

HTML5
1
2
3
<svg height="210" width="500">
  <polygon points="10 10, 10 100, 75 150, 150 100, 150 10" style="fill:lime;stroke:purple;stroke-width:1" />
</svg>

Новые блоги и статьи Все статьи Все блоги /
Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Programma_Boinc 28.12.2025 Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Налог на собак: https:/ / ********/ gallery/ V06K53e Финансовый отчет в Excel: https:/ / ********/ gallery/ bKBkQFf Пост отсюда. . .	Кто-нибудь знает, где можно бесплатно получить настольный компьютер или ноутбук? США. Programma_Boinc 26.12.2025 Нашел на реддите интересную статью под названием Anyone know where to get a free Desktop or Laptop? Ниже её машинный перевод. После долгих разбирательств я наконец-то вернула себе. . .	Thinkpad X220 Tablet — это лучший бюджетный ноутбук для учёбы, точка. Programma_Boinc 23.12.2025 Рецензия / Мнение/ Перевод Нашел на реддите интересную статью под названием The Thinkpad X220 Tablet is the best budget school laptop period . Ниже её машинный перевод. Thinkpad X220 Tablet —. . .	PhpStorm 2025.3: WSL Terminal всегда стартует в ~ and_y87 14.12.2025 PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .	Как объединить две одинаковые БД Access с разными данными VikBal 11.12.2025 Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.
Новый ноутбук volvo 07.12.2025 Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro	Музыка, написанная Искусственным Интеллектом volvo 04.12.2025 Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .	От async/await к виртуальным потокам в Python IndentationError 23.11.2025 Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .	Поиск "дружественных имён" СОМ портов Argus19 22.11.2025 Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .	Сколько Государство потратило денег на меня, обеспечивая инсулином. Programma_Boinc 20.11.2025 Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .

@xDanbo 15 / 15 / 7 Регистрация: 12.04.2014 Сообщений: 101

	Как сделать такую фигуру с тенями? 19.09.2015, 18:06. Показов 1765. Ответов 7 Метки нет (Все метки) Как при помощи CSS сделать такой треугольник с тенями вместе с остальной частью, на которой тоже есть тень? Изображения 0

@mytilus 87 / 86 / 27 Регистрация: 04.10.2012 Сообщений: 355
	19.09.2015, 18:20
	Если CSS3, то clip-path и box-shadow. Но для совместимости я сделал бы с помощью <svg>. 0

@xDanbo 15 / 15 / 7 Регистрация: 12.04.2014 Сообщений: 101
	19.09.2015, 18:57 [ТС]
	mytilus, я попытался с помощью этого генератора http://cssplant.com/clip-path-generator сделать похожую фигуру, но почему-то она не выводится. Не подскажете, в чем ошибка? http://codepen.io/xDanbo/pen/xwOKWw А постойте-ка, надо же еще сам div добавить. Добавил, но видно только половину фигуры. 0

@xDanbo 15 / 15 / 7 Регистрация: 12.04.2014 Сообщений: 101
	19.09.2015, 19:24 [ТС]
	Sn1p3rOk, в генераторе это выглядит так: Миниатюры 0

@xDanbo 15 / 15 / 7 Регистрация: 12.04.2014 Сообщений: 101
	19.09.2015, 19:38 [ТС]
	Sn1p3rOk, через clip-path и я нарисовал, но только в живом проекте его не применишь, нужна совместимость со всеми браузерами. Как это через SVG реализовать? 0

Как сделать такую фигуру с тенями?

Решение