Добрый день уважаемые. Подскажите как реализовать маскирование фонов в CSS ?
Приведу простой пример:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css" media="screen">
.bigBlock{
width: 100px;
height: 100px;
background-color: red;
}
.square{
width: 100px;
height: 100px;
background-color: black;
}
.circle{
width: 100px;
height: 100px;
-webkit-border-radius: 50%;
-moz-border-radius:50% ;
border-radius: 50%;
border: 1px solid #fff;
}
</style>
</head>
<body>
<div class="bigBlock">
<div class="square">
<div class="circle"></div>
</div>
</div>
</body>
</html>
Задание, как сделать так что б у верхнего круга был виден вон который у класса .bigBlock. То есть на выходе я хочу получить красный круг в чёрной оконтовке. Я пробвал работать через свойство
-webkit-clip-path: circle(50% at 50% 50%);
clip-path: circle(50% at 50% 50%);
но у меня почему то ни чего не прошло. Как сделать так что б круг игнорировал фон своего непосредственного родителя ?
Это не наш метод. Необходимо именно что б просвечивался.
