将内容隐藏在透明Div（纯CSS）下？

Question

我试图通过在另一个div上使用div来“成形” div，以隐藏其中的一部分。我在下面发布我的代码。

是否有一种纯CSS方法可以将div下的某些元素隐藏而不将背景隐藏在透明的div中？

在我的示例中，我希望圆是完全透明的（为了便于查看，它是半透明的），并隐藏正方形重叠的部分。

.square {
    background: rgba(134,95,96,1.00);
    height: 500px;
    width: 500px;
    position: absolute;
    bottom: 20%;
    right: 20%;
    min-height: 500px;
    min-width: 500px;
}

.circle {
    background: rgba(141,76,147,0.50);
    border-radius: 50%;
    position: absolute;
    top: 50%;
    bottom: 20%;
    right: 33%;
    height: 500px;
    width: 500px;
    z-index: 1;
}

<div class="square"><p>Square</p></div>
<div class="circle"><p>Circle</p></div>