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

Question

[Денис Савицкий]

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

Comments

[Денис Савицкий]

Спасибо за ответы. А каким образом можно это реализовать на canvas?

Answer 1

[Денис Савицкий]

Ответ:
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>

Comments

[Денис Савицкий]

CSS:

#main {position:relative;}
.black, .red, .blue, .green {
    position:absolute;
    border:3px dotted #000;
    background:#FFF;
    z-index:10;
}
.content {position:relative;margin:10px;}
.black {top:300px;left:103px;z-index:9;}
.black .content {height:180px;width:280px;background:#000;}
.blue{ top:50px;left:200px;border-bottom:none;}
.blue .content {height:30px;width:30px;background:#009;}
.red{top:0px;left:0px;}
.red .content {height:280px;width:80px;background:#F00;}
.green{top:100px;left:103px;border-left:none;border-bottom:none;}
.green .content{height:180px;width:180px;background:#070;}

[Данил]

гуру)

Answer 2

[shsmad]

А это вообще реально? Что у инлайновых, что у блочных элементов граница — прямоугольник. А элементов с многоугольной формой нет. Если только на canvas/svg рисовать

Answer 3

[Павел Савченков]

По моему отдельным элементом никак.

Comments

[Павел Савченков]

Или, если требуется только граница, то через задание границы у дочерних элементов с помощью CSS

[Денис Савицкий]

А как у дочерних задать такой сложной формы границу?

[Павел Савченков]

<div class="parent"> <div id="id1"></div> </div> CSS .parent div { border: 4px double black; }

[lastwish]

Так? jsfiddle.net/AU82A/

По-моему не реально реализовать такой подход для произвольного расположения

[Денис Савицкий]

Да! Супер. Так можно генерить с помощью js «на лету», наверно. Или хранить координаты как-нибудь…

[Денис Савицкий]

ааа… поигрался и понял, как это реализовано…

Answer 4

[glamurchik]

в сторону shape копать нада…

Comments

[shsmad]

Шэйпами можно задать какую-то конкретную форму, а произвольную (как хочет автор) — увы, нет.

Answer 5

[Stdit]

В CSS это вряд ли получится, если только вручную приделывать границы к блокам на яваскрипте. Но нечто похожее можно сделать на SVG. Сначала нарисовать все блоки и сгруппировать. Потом взять альфа-канал группы, и расширить его фильтром feMorphology (dilate). Потом для получившегося «пятна» применить определение границ матрицей feConvolveMatrix. Потом нарисовать эту границу поверх исходника, при желании украсить. Как-то так. Если не понятно, вот набросок: jsfiddle.net/sSMT4/

Comments

[Денис Савицкий]

Спасибо за вариант! Попробую разобраться…

Answer 6

[Константин]

div > div {display: block; margin: 10px};

Comments

[Денис Савицкий]

Что-то не то…

[Константин]

Нууу, тогда не то