Как вариант использовать mix-blend-mode: multiply;
<!DOCTYPE html><html lang="en">
<head>
<meta charset="utf-8">
<style type="text/css">
.bigBlock{
width: 100px;
height: 100px;
background-color: red;
}
.square{
width: 100px;
height: 100px;
background-color: black;
mix-blend-mode: multiply;
}
.circle{
width: 100px;
height: 100px;
border-radius: 50%;
background: white;
}
</style>
</head>
<body>
<div class="bigBlock">
<div class="square">
<div class="circle"></div>
</div>
</div>
</body>
</html>
Если позволите упростить вашу HTML-разметку и использовать радиальный градиент, то можно так.
<!DOCTYPE html><html lang="en">
<head>
<meta charset="utf-8">
<style type="text/css">
.bigBlock {
width: 100px;
height: 100px;
background-color: red;
}
.square {
width: 100px;
height: 100px;
}
.circle {
background: radial-gradient(closest-side at 50% 50%, transparent 90%, black calc(90% + 1px)) 0 0 / 100px 100px;
}
</style>
</head>
<body>
<div class="bigBlock">
<div class="square circle">
</div>
</body>
</html>
http://codepen.io/anon/pen/RKpmYW?editors=1100
