Нет прямого способа манипулировать формой элемента DOM - все элементы либо прямоугольные (если они display:block;), либо имеют форму своего текстового содержимого (если они display:inline;).
HTML DOM вращается вокруг прямоугольных блоков, поэтому вы не получите случайные формы с использованием этого.
Это зависит именно от того, что вы пытаетесь сделать. Если все, что вам нужно, это рисовать фигуры, то вам лучше использовать canvas, SVG или VML, в зависимости от того, что именно вы хотите сделать, и поддержки браузера, которая вам нужна.
Canvas - это технология HTML5, которая в основном дает вам панель рисования в браузере, которую вы можете рисовать с помощью Javascript. Позволяет создавать и анимировать 2D пиксельные рисунки.
SVG и VML являются языками векторной графики. Они выполняют примерно ту же задачу, но VML специфичен для Internet Explorer, в то время как большинство других браузеров поддерживают SVG. (IE9 также будет поддерживать SVG, но пока он не широко используется). Опять же, вы можете работать с ними, используя Javascript, и лучший способ сделать это кросс-браузерным способом - это использовать Raphael libraray , который дает вам API для создания вашей графики, а затем переводит ее в VML или SVG за кадром в зависимости от браузера.
Вы также можете, конечно, просто иметь фоновый рисунок для вашего блока в нужной форме с прозрачными областями за пределами формы и использовать только область внутри блока. Это не будет многоугольной коробкой, но если вы все сделаете правильно, она будет выглядеть так же хорошо.
Если вы действительно хотите сделать это с помощью CSS - возможно, для того, чтобы иметь поле, которое другие текстовые элементы будут плавно обтекать, вы будете бороться. Есть несколько хаков, которые вы можете использовать для достижения такого рода эффектов, но ни один из них не является именно тем, что вы ищете.
Одной из опций могут быть CSS-трансформации: это позволяет вам вращать / наклонять и т. Д. Окно. Недостатком является то, что коробка остается коробчатой (то есть без многоугольников), а содержимое поворачивается и наклоняется, а также контур коробки, поэтому может не соответствовать тому, что вы пытаетесь сделать. Кроме того, он может работать не во всех браузерах, хотя в большинстве случаев его можно заставить работать.
Можно создавать прямоугольники с искусственными диагональными краями, возясь со стилями границ. См. http://www.cssplay.co.uk/menu/tree.html для хорошего примера. Но опять же, это не идеально.
Кроме того, вам просто нужно создать несколько блоков и расположить их, чтобы получить наиболее близкое соответствие к фигуре, которую вы пытаетесь достичь.
Надеюсь, это поможет.