| doniv | 08.04.2011 16:05 |
Обрезание блоков по общему контуру
Здравствуйте, появилась проблема, что понятнее ее объяснить я накатал иллюстрацию:
Мне нужно, чтобы все блоки, которые выходят за скругление блока X1 были полностью обрезаны.
Проблема в том, что, например, хром обрезает блоки с background-image и relative не по скруглению, а по естественному контуру, то есть по прямоугольнику div'a. Opera вообще обрезает только по первоначальному контуру и только огнелис справляется со своей задаче.
Выглядит все примерно так:
Может быть, у кого-то есть JS решение подобной задачи?
Мне нужно, чтобы все блоки, которые выходят за скругление блока 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;
}