如何使用 CSS 在图像中心设置半圆？ [复制]答案

【问题标题】：How to use CSS to set a half circle in the center of an image? [duplicate]如何使用 CSS 在图像中心设置半圆？ [复制]
【发布时间】：2018-04-24 16:28:52
【问题描述】：

是否可以在任何图像中设置这样的 CSS？

我需要在图像中创建具有这种半圆形效果的图像。可以用 CSS 做吗？

【问题讨论】：

你能提供更多关于你正在做什么的信息吗？例如，您是否希望半圆与图像顶部对齐？
是的，有可能。方法很多。
w3schools.com/howto/howto_css_circles.asp

标签： css

【解决方案1】：

因为 渐变 FTW

div{
  display: inline-block;
  color: white;
  padding: 40px 50px 20px;
  background: radial-gradient(circle at top, white 14px, #0091C9 15px);
  border-radius: 10px 10px 0 0;
}

&lt;div&gt;WOOHOO&lt;/div&gt;

【讨论】：

【解决方案2】：

使用border-radius（根据需要更改大小值和颜色）

#cont {
  width: 250px;
  height: 150px;
  background: navy;
  position: relative;
  border-radius: 20px 20px 0 0;
  -webkit-border-radius: 20px 20px 0 0;
  text-align: center;
}

.text {
  color: white;
  font-weight: 900;
  position: absolute;
  top: 60px;
  right:0;
  left:0;
  text-align: center;
}

.circle {
  background: white;
  position: absolute;
  top: -15px;
  left: 110px;
  width: 30px;
  height: 30px;
  -webkit-border-radius: 20px;
  border-radius: 20px;
}

<div id="cont">
<div class="circle"></div>
<div class="text"> Text</div>
</div>

【讨论】：

非常感谢它运行良好:)
@dharachauhan 您可以将其标记为答案，方法是单击排名部分下方的 V 按钮（位于答案本身的左侧）