Динамический фасонный div в HTML

Question

Могу ли я сделать div с пользовательской формой? Я имею в виду, что у меня есть прямоугольный div по умолчанию, и несколько форм можно получить, используя свойство границы-радиуса div, но я ищу элемент в форме полураствора, что-то вроде этого:

Картинка не очень хорошая, но это то, что я ищу. Элементы в div должны быть расположены в этой форме. Как мне достичь такой функциональности?

Я ищу не просто фигуру, а элемент, имеющий такую ​​форму, который может содержать больше элементов.

Основная проблема, с которой я сталкиваюсь, если я использую border-radius в качестве решения, заключается в том, что я поместил изображения внутри этого div, теперь, если я использую border-radius, он либо обрезается, как в Firefox, либо переполняется за его пределы. как в WebKit браузерах. Как сделать так, чтобы содержимое было строго внутри фигурного элемента?

Answer 1

Относительно формы элемента div , вы можете достичь этого, изменив радиусы углов границы с помощью свойства border-radius CSS:

width:25px;
height:200px;
background-color:#333;
border-top-left-radius:50px 200px;
border-bottom-left-radius:50px 200px;
-moz-border-radius-topleft:50px 200px;
-moz-border-radius-bottomleft:50px 200px;

Простая рабочая демонстрация div: http://jsfiddle.net/AlienWebguy/83scc/1/

Выполнение этого с помощью только рамки на одном элементе div не будет хорошо отображаться на Mac - например, если у вас просто белый фон и черная рамка, граница будет «вырезана»и затем «вновь появляются» из-за плохих расчетов кривых Безье и заполнения.Только с цветом фона (в демоверсии) это выглядит великолепно.Вы можете легко удвоить свои div, один белый, и один черный на 1 пиксель, который находится под ним, вот так:

Пример рабочего плана: http://jsfiddle.net/AlienWebguy/83scc/3/

До содержимое div , они, естественно, не будут расположены таким образом, чтобы дополнять эту форму, поэтому вам нужно дать им абсолютное позиционирование и дать родителю свойство overflow:hidden;.

Answer 2

Краткий ответ: нет. Див не может сделать это для вас. По крайней мере, не во всех браузерах. Это и всегда будет прямоугольный элемент в сердце (даже с закругленными углами).

Если вы хотите нарисовать что-то подобное, вы можете использовать новый классный тэг canvas и создать магию javascript. Если вы ищете что-то, что действительно будет правильно держать вещи (с отступами и всем этим), посмотрите на это: Polygonal Divs - Переполнение содержимого в определенной форме?

Я задал тот же вопрос некоторое время назад в несколько ином формате. У него есть несколько хороших ответов.

Answer 3

Вы можете использовать проценты, чтобы настроить его на разные размеры;)

Попробуйте изменить его размер (в браузере, поддерживающем изменение размера CSS) http://jsfiddle.net/leaverou/XHbhr/1/ и посмотрите, как он изменяется в соответствии с его размерамибез JavaScript вообще:)

Answer 4

Посмотрите в документации Mozilla о граничном радиусе, у них есть довольно хорошие примеры: border-radius