Пересечение в CSS3

Question

Можно ли сделать "дыру" в элементе (div, span), например, с помощью CSS. Я знаю, что могу сделать это с прозрачным изображением, но мне просто интересно узнать, возможно ли это в CSS.

body {padding:70px; background:url(http://ipadinsight.com/wp-content/uploads/2011/11/AirPlayMirroring_thumb.jpg)} 
div {background:red;border-radius:10px;width:400px;height:100px}​

Попробуйте здесь jsfiddle http://jsfiddle.net/xqEV2/

Answer 1

Да; Вы можете сделать это с чистым CSS. Как это:

body {padding:70px; background:url(http://ipadinsight.com/wp-content/uploads/2011/11/AirPlayMirroring_thumb.jpg);}

.parent {background:red;border-radius:10px;width:400px;height:100px;position:relative;}
.circle{

    float:right;
    position:absolute;
    right:-50px;
    top:0;
    bottom:0;
    width:50px;
    overflow:hidden;
}
.circle:after{
    content:"";
    width:40px;
    height:40px;
    -moz-border-radius:100px;
    display:block;
    border:red 50px solid ;
    margin-left:-45px;
    margin-top:-20px;
}

Проверьте этот живой пример

http://jsfiddle.net/xqEV2/4/

Answer 2

Вы можете смоделировать отверстие, установив то же фоновое изображение для отверстия, что и базовый элемент. Это не делает его действительно прозрачным.

http://jsfiddle.net/VJRFh/2/

Answer 3

Нет, DIV - это "сплошной объект".

С другой стороны, вы можете использовать прозрачное изображение (png или gif), чтобы сделать что-то похожее на дыру.вы не сможете взаимодействовать со слоем под сеткой, пока вы не изменили z-индекс.

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