使用CSS在矩形上画圈[关闭]

我想设计一个类似于下图的形状（圆形和矩形之间的效果）：

我知道圆形是用设计的边界半径类似矩形的形状设计有一些具有风格的无序列表显示：块。但我不明白如何将圆圈保持在矩形上方，以便看起来矩形的某些部分被圆圈以圆形形状（圆圈和矩形之间的白色空间）切割。

我尝试过盒子阴影、轮廓、溢出等，但它不起作用。
谁能告诉我如何设计它，如下图所示？

像这样的东西吗？http://codepen.io/anon/pen/VvqRep http://codepen.io/anon/pen/VvqRep

.rectangle{
  display:block;
  height:40px;
  width:150px;
  background:red;
  position:relative;
  margin-top:100px;
}

.circle{
  position:absolute;
  height:40px;
  width:40px;
  border-radius:40px;
  border:3px solid white;
  left:50%;
  margin-left:-25px;
  top: -20px;
    background:red;
}

“截止”效果是通过使用圆圈上的边框来实现的。

如果我的asnwser对您有帮助，您可以选择它吗？谢谢