пользовательская форма изображения контейнера

Question

Есть ли способ создать контейнер изображений нестандартной формы?Чтобы использовать что-то вместо <div />?

Проблема возникает, когда мне нужно добавить углы поверх # поля содержимого (http://img855.imageshack.us/img855/8343/screenshot20111027at163.png).В угловых изображениях используется только половина элемента блока, остальные (розовый альфа-фон) блокируют активные элементы под ним.

Есть ли обходной путь для этого?

Answer 1

Чтобы ответить на мои собственные вопросы:

Невозможно иметь HTML-элемент пользовательской формы без родительского блока, в любом случае удерживающего его, например, в случае SVG.

Однако одинОбходной путь, который мне удалось найти, - это волшебное правило CSS pointer-events, которое, как вы уже могли догадаться, помогает щелкнуть по элементу.

pointer-events: none;

Это решило мою проблему.

Answer 2

Невозможно иметь контейнеры нестандартной формы.Вы можете сделать это, используя <div> оболочки, каждый из которых содержит различное фоновое изображение.Например:

html

<div id="content-wrapper">
    <div id="content-box">
    <!-- Upload photo content box --->
    </div>
</div>

css

#content-wrapper,
#content-box{
    width:500px;
    height:500px;
}

#content-wrapper{background:url('images/four-corners.png') no-repeat}
#content-box{background:url('images/octagon.png') no-repeat}

Таким образом изображения не будут блокировать какие-либо активные элементы на странице.