使用CSS绘制圆形在矩形上方

Question

我希望设计一个形状，与下面的图片形状尽可能相似（圆形和矩形之间的效果）：

我知道使用 border-radius 可以设计出圆形，而类似矩形的形状可以使用一些无序列表，并设置样式为 display: block。但是，我不明白如何将圆形覆盖在矩形上方，使其看起来像圆形切掉了矩形的一部分，呈现出圆形和矩形之间的白色空间。

我已尝试使用 box-shadow、outline、overflow 等方法，但都没有成功。
有谁能告诉我如何设计它，使其像下面的图片那样呢？

- Shimul

---

你尝试过在圆形上使用 "border: 2px solid #fff;" 吗？ 让我们看看你的代码，然后再继续。 - damiano celent

尝试将圆形div的边框颜色设置为白色怎么样？ - kkaosninja

这样的问题对许多人很有用（已查看8k次）。不明白关闭它的意义。 - abarazal

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;
}

通过在圆形周围使用边框，可以实现“截止”效果。

如果我的回答对您有帮助，请选择它吗？谢谢。

- Nick

---

谢谢。它正在运行。 - Shimul

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;
}

DEMO HERE

- user5408654

Answer 3

看这个 :)

.base{
  height:80px;
  width:300px;
  background:#d33;
  position:relative;
  margin-top:100px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

.circle{
  position:absolute;
  height:100px;
  width:100px;
  border-radius:50%;
  border:3px solid white;
  left:50%;
  margin-left:-55px;
  top: -40px;
  background: #d33;
}

<div class="base">
  <div class="circle"></div>
</div>

- Jinu Kurian

Answer 4

请使用以下html和css代码:

CSS:

#rectangle {
    width:300px;
    height:70px;
    position: relative;
    background: #cc0000;
    border-radius: 5px 5px 0 0;
}
#rectangle #circle {
    width:70px;
    height:70px;
    position: absolute;
    top:-35px;
    background:#cc0000;
    border:1px solid #fff;
    border-radius:70px;
    left: 50%;
    margin-left: -35px;
}

HTML:

<div id="rectangle">
    <div id="circle"></div>
</div>

- Majid Sadr

Answer 5

#bg {
    position: relative;
    background: red;
    width: 200px;
    height: 50px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    margin-top: 50px;
}
#circle {
    position: absolute;
    background: red;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;    
    top: -50px;
    width: 75px;
    height: 75px;
    border: 3px solid #fff;
    border-radius: 50%;
}

<div id="bg">
    <div id="circle"></div>
</div>

- Dalibor