Обрезание блоков по общему контуру

[doniv]

Здравствуйте, появилась проблема, что понятнее ее объяснить я накатал иллюстрацию:



Мне нужно, чтобы все блоки, которые выходят за скругление блока X1 были полностью обрезаны.

Проблема в том, что, например, хром обрезает блоки с background-image и relative не по скруглению, а по естественному контуру, то есть по прямоугольнику div'a. Opera вообще обрезает только по первоначальному контуру и только огнелис справляется со своей задаче.

Выглядит все примерно так:

<div class=".b-knowledge__elemen">
      <div class="element-cover__left"></div>
      <div class="element-cover__leftX2"></div> <!-- Чтобы не один :) -->
</div>

.b-knowledge__element{
    overflow:hidden;
    padding: 10px 4px;
    margin-top: 25px;
    margin-left: -55px;
    display:inline-block;
    background: #000;
}

...

.element-cover__left{
    position:relative;
    display:block;
    background: url(../images/book-cover.png) no-repeat -13px -3px;
    height: 200px;
    width: 100%;
    padding: 20px 7px 0px 0px;
    margin-top: -210px;
    margin-left: -13px;
}

Может быть, у кого-то есть JS решение подобной задачи?

[ksa]

doniv, сделай картинку с прозрачным центром... При наложении поверх чего-либо - будет видна только центральная часть.

[doniv]

doniv, сделай картинку с прозрачным центром... При наложении поверх чего-либо - будет видна только центральная часть.

Такой хак не прокатит.
Во-превых, внутри блока находятся блоки с активными элементами. Во-вторых, снаружи блока реализован сложный фон (черз дата url), и если накладывать картинку с таким фоном, а она судя по радиусу будет довольно большая, то это очень плохо скажется на производительности.

[ksa]

doniv, тогда остаётся только страдать...

[Aetae]

...ещё пяток-другой лет...

[0931454574]

а можно сделать png с вырезов внутри ? и под него мостить, тоесть его в з индекс.

[doniv]

а можно сделать png с вырезов внутри ? и под него мостить, тоесть его в з индекс.

Нет, к сожалению, содержимое блоком постоянно меняется. Можно, конечно, обрезать содержимое (изображения), под нужный контур на уровне сервера, но такое решение как крайность, скорее.

[poorking]

Может этой ситуации можно как нибудь избежать? Например сама дыра в виде круга - это будет прозрачная область в png, под картинкой например ваши блоки, а на картинку положить map, но если у вас там в блоках совсем уж активное содержимое, например куча кнопочек, которые могут менять свое положение и проч, тогда конечно не подойдет. Хотя.. можно вместе с изменением содержимого этих блоков и map генерировать, трудненько будет, но раз уж такой дизайн

[doniv]

Может этой ситуации можно как нибудь избежать? Например сама дыра в виде круга - это будет прозрачная область в png, под картинкой например ваши блоки, а на картинку положить map, но если у вас там в блоках совсем уж активное содержимое, например куча кнопочек, которые могут менять свое положение и проч, тогда конечно не подойдет. Хотя.. можно вместе с изменением содержимого этих блоков и map генерировать, трудненько будет, но раз уж такой дизайн

Спасибо, о мапе я как-то забыл. Однако, остается все та же проблема о которой я уже писал "снаружи блока реализован сложный фон (через дата url), и если накладывать картинку с таким фоном, а она судя по радиусу будет довольно большая, то это очень плохо скажется на производительности".

В общем, теперь есть о чем подумать

[poorking]

doniv,
Можно любые события на map area повторить на блоках под картинкой. На map определяем над каким элементом будет выполняться действие (каждая area соответствует определенному блоку) и потом это событие на area (пусть e) используем на нужном элементе elem.dispatchEvent(e), как то так, но это просто мысли

PS а по поводу дырки, может есть возможность в вашем этом сложном фоне сделать эту дырку?