使用CSS在矩形上圈出

Question

我想设计一个与下图相似的形状(圆形和矩形之间的效果):

我知道圆形的形状是使用border-radius设计的,矩形的形状是用一些无序的列表设计的,它有样式display:block.但我无法理解如何将圆圈保持在矩形上,以便看起来矩形的某些部分被圆形切割成圆形(圆形和矩形之间的白色空间).

我尝试了盒子阴影,轮廓,溢出等,但它不起作用.
任何人都可以告诉我如何设计像图像一样的形状？- 谢谢

Answer 1

像这样的东西？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帮助你,你可以选择它吗？谢谢

Answer 2

你可以尝试这个:

.rectangle{
  display:block;
  height:50px;
  width:150px;
  background:red;
  position:relative;
  margin-top:100px;
    border-top-left-radius: .5em;
    border-top-right-radius: .5em;
}

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

在这里演示