qweewq
@qweewq
ruby, ruby on rails, devops

Как сделать div с границей, «обволакивающей» объекты внутри него?

Как сделать div(или другой элемент) с границей, «обволакивающей» объекты внутри него?
Вот такой, например: image
  • Вопрос задан
  • 6802 просмотра
Решения вопроса 1
qweewq
@qweewq Автор вопроса
ruby, ruby on rails, devops
Ответ:
Demo,
Html:
<div id="main">
  <div class="red"><div class="content">Red</div></div>
  <div class="green"><div class="content">Green</div></div>
  <div class="blue"><div class="content">Blue</div></div>
  <div class="black"><div class="content">Black</div></div>
</div>
Ответ написан
Пригласить эксперта
Ответы на вопрос 5
@shsmad
А это вообще реально? Что у инлайновых, что у блочных элементов граница — прямоугольник. А элементов с многоугольной формой нет. Если только на canvas/svg рисовать
Ответ написан
По моему отдельным элементом никак.
Ответ написан
glamurchik
@glamurchik
в сторону shape копать нада…
Ответ написан
Stdit
@Stdit
В CSS это вряд ли получится, если только вручную приделывать границы к блокам на яваскрипте. Но нечто похожее можно сделать на SVG. Сначала нарисовать все блоки и сгруппировать. Потом взять альфа-канал группы, и расширить его фильтром feMorphology (dilate). Потом для получившегося «пятна» применить определение границ матрицей feConvolveMatrix. Потом нарисовать эту границу поверх исходника, при желании украсить. Как-то так. Если не понятно, вот набросок: jsfiddle.net/sSMT4/
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы