[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 решение подобной задачи?