Html 如何在CSS中制作圆圈？

我要把那件白色的东西盖在灰色的条纹上。我很困惑，因为我以前没有做过这样的事情。你会用哪种方法来创造这样的东西

.条纹{
背景色：#b7b7；
高度：13vh；
}

---

提前谢谢你

您可能需要使用边界半径属性

HTML:

.stripe{
背景色：#b7b7；
高度：13vh；
}
.那件白色的东西已经完全成熟了{
背景色：白色；
高度：13vh；/*或100%*/
宽度：80px；/*或6.5vh（半圆）或13vh（带r宽度和半圆的矩形）*/
右上角边界半径：6.5vh；/*这就可以了；可以选择任意数字，也可以选择div的全高*/
边框右下角半径：6.5vh；/*和此*/
}

.圆圈{
边框半径：50%；//使正方形变成圆形，而不考虑大小
背景：白色；
高度：13vh；
宽度：13vh；
显示：块；
溢出：隐藏；
}

您可以这样做，请参见fiddle:

html

我是这样做的

.s2{
背景色：白色；
浮动：左；
宽度：70px；
高度：13vh；
边界右上角半径：50%；
边框右下半径：50%；
}
.条纹{
背景色：#b7b7；
高度：13vh；
}

---

单个标记+伪标记也可以：

h1{
溢出：隐藏；/*以保留伪*/
左侧填充：1.5em；/*为形状留出空间*/
线高：2米；
}
h1：在{/*形状之前*/
内容：''；
float:left；/*或内联块或绝对位置也适用于flex上下文*/
高度：2em；/*此处为标签高度（若为一行）*/
宽度：2米；/*从正方形可以画一个圆*/
左边距：-2.5em；/*隐藏一半或任何金额*/
边界半径：50%；/*画那个圆*/
框阴影：0 0 500px 500px灰色，0 0 0 1000px 1000px黄色；；/*绘制一个hudge阴影以用作父标记的背景*/
}
/*添加边框*/
h1+h1{
边框：实心；
左边界：无；
边界半径：0 1米1米0；
}
h1+h1：之前{
长方体阴影：0 0 3px，0 0 500px 500px灰色，0 0 1000px 1000px黄色；；/*绘制一个hudge阴影，用作父标记的背景*/
}
身体{
背景：url(http://lorempixel.com/600/400/nature/2);
}

反向四舍五入
反转圆形边框

我希望你会发现这个答案既简单又完美

.stripe{
背景色：#b7b7；
高度：13vh；
}
怀特先生{
背景色：白色；
高度：13vh；
宽度：13vh；
边界半径：0 50%50%0；
}

Oh。。。他们已经回答：（不要灰心。我感谢你的回答谢谢，我也感谢你注意到我的回答。）虽然这是一个很好的解决方案，但高度和宽度是不同的值类型，因此它不会在不同的视口高度下保持纵横比。此外，为什么不只用一条线来处理边界半径？边界半径：0 50%50%0；见下面我的答案。可能与（或副本）

<div class="stripe"></div>

.stripe {
  background-color: #B7B7B7;
  height: 13vh;
}

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

    .stripe {
  background-color: #B7B7B7;
  height: 13vh;
}

.circle{
  background:white;
  width:10%;
  height:100%;
  border-radius:00px 50px 50px 0px;
}

<div class="stripe"><span class="circle"></span></div>

.circle {
  border-radius:50%; //makes the square into circle regardless of size
  background: white;
  height:13vh;
  width:13vh;
  display:block;
  overflow:hidden;
 }

<div class="stripe">
<div class="rec">
</div>
<div class="circle">
</div>
</div>

body{margin: 0;}
.stripe {
  background-color: #B7B7B7;
  height: 100px;
}
.rec{
  width: 100px;
  height: 100px;
  background-color: white;
}
.circle {
    border-radius: 50%;
    width: 100px;
    height: 100px;
  background-color: white;
  position: absolute;
  left: 50px;
  top: 0;
    /* width and height can be anything, as long as they're equal */
}