Верстка сложных элементов - HTML и CSS

Alexander_GL · 04.10.2017, 11:54

Всем привет!

Есть задание, сверстать фигуру представленную ниже на картинке, так как предусмотрен hover эффект тени по всему контуру фигуры.

Возникла сложно с версткой элементов обрамленных красным квадратом... Так же стоит учесть что это часть пазла представленного из четырёх элементов, и на каждом должен быть hover эффект...

Как можно сверстать эти элементы?

Заранее большое спасибо за помощь!

test.JPG

pompiduskus · 04.10.2017, 13:02

Можно попробовать на SVG или Canvas.

Вообще, если не ошибаюсь, стандартными штуками, на сегодня, это не возможно (html; css )

Naive · 04.10.2017, 21:51

Цитата:

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

Можно попробовать на SVG или Canvas.

Вообще, если не ошибаюсь, стандартными штуками, на сегодня, это не возможно (html; css )

Возможно, но только спортивного интереса ради. Проще сделать действительно через SVG. Канвас, думаю, тут будет сложнее обрабатывать. В любом случае, надо отталкиваться от задачи.

pompiduskus · 05.10.2017, 13:13

А что css+html, поддерживает эллиптические бордеры ?

Naive · 05.10.2017, 19:20

Цитата:

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

А что css+html, поддерживает эллиптические бордеры ?

ну, border-radius =)
один он, конечно, не решит задачу ТС, но если приложить немного соображалки, то сделать можно.

04.10.2017, 11:54	#1
Alexander_GL Новичок Джуниор Регистрация: 04.10.2017 Сообщений: 1	Верстка сложных элементов Всем привет! Есть задание, сверстать фигуру представленную ниже на картинке, так как предусмотрен hover эффект тени по всему контуру фигуры. Возникла сложно с версткой элементов обрамленных красным квадратом... Так же стоит учесть что это часть пазла представленного из четырёх элементов, и на каждом должен быть hover эффект... Как можно сверстать эти элементы? Заранее большое спасибо за помощь! test.JPG Последний раз редактировалось Alexander_GL; 04.10.2017 в 12:57.

04.10.2017, 13:02	#2
pompiduskus юзер как все Участник клуба Регистрация: 10.01.2012 Сообщений: 1,586	Можно попробовать на SVG или Canvas. Вообще, если не ошибаюсь, стандартными штуками, на сегодня, это не возможно (html; css ) <Дзен - Вся вселенная в тебе > \| Резюме: https://ch3ll0v3k.github.io/CV/

05.10.2017, 13:13	#4
pompiduskus юзер как все Участник клуба Регистрация: 10.01.2012 Сообщений: 1,586	А что css+html, поддерживает эллиптические бордеры ? <Дзен - Вся вселенная в тебе > \| Резюме: https://ch3ll0v3k.github.io/CV/

Опции темы	Поиск в этой теме
Версия для печати Отправить по электронной почте	Поиск в этой теме: Расширенный поиск

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
Мобильная верстка - уехала верстка	Phillbot	HTML и CSS	0	13.04.2017 10:29
Подсчитать кол-во различных элементов в "сложных" условиях	ayPinki	Общие вопросы Delphi	12	31.01.2014 19:18
Организация сложных циклов	Jefka	Паскаль, Turbo Pascal, PascalABC.NET	2	25.11.2013 11:18
Программирование сложных циклов	FcDonalds	Помощь студентам	2	24.12.2008 22:49
Любителям сложных формул посвящается!	ZORRO2005	Microsoft Office Excel	6	02.10.2008 20:01