使用CSS在矩形上圈出[关闭]答案

【问题标题】：Circle over a rectangle using CSS [closed]使用CSS在矩形上圈出[关闭]
【发布时间】：2021-01-04 20:59:44
【问题描述】：

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

我知道圆形是使用 border-radius 设计的，而类似矩形的形状是使用一些具有样式 display: block 的无序列表设计的。但我不明白如何将圆圈保留在矩形上，以便看起来矩形的某些部分被圆形切割（圆形和矩形之间的白色空间）。

我尝试过 box-shadow、outline、overflow 等，但都不起作用。
谁能告诉我如何像下图那样设计它？

【问题讨论】：

你试过“border: 2px solid #fff;”在圈子上？让我们看看你的代码，然后从那里开始。
为圆形 div 尝试白色的边框颜色怎么样？
这样的问题对很多人都很有用（查看了 8k 次）。没有看到关闭它的意义。

标签： html css css-shapes

【解决方案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 帮助了你，你能选择它吗？谢谢

【讨论】：

谢谢。它正在工作。

【解决方案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

【讨论】：

【解决方案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>

【讨论】：

【解决方案4】：

#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>

【讨论】：

【解决方案5】：

使用这个：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>

【讨论】：