如何在离子div的背景上制作半圈？

Question

有没有人知道如何为div的离子背景制作半圆，如图所示？

我试图用以下代码创建一个，但不适用于我的情况。

<div class="half-circle"></div>

.half-circle {
 width: 100px;
 height: 200px;
 background-color: gold;
 border-bottom-right-radius: 100px;
 border-top-right-radius: 100px;
 border: 10px solid gray;
 border-left: 0;

 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
}

CSS帮助将不胜感激。

Answer 1

像这样吗？

.content {
  width: 200px;
}
.half-circle {
 height: 100px;
 background-color: blue;
 border-bottom-right-radius: 100px;
 border-bottom-left-radius: 100px;
}
.name {
  text-align: center;
}

<div class="content">
<div class="half-circle"></div>
  <div class="name">My name is</div>
  </div>

Answer 2

您可以使用伪元素::before和背景linear-gradient创建此形状。

它的工作原理如下（我添加了一个边框以进行澄清：

这样，您可以创建一个非常平坦的半圆，并可以根据需要对其进行定位。而且，多行文本根本没有问题，因为圆圈始终位于div的顶部。这是一个工作示例：

.half-circle {
  width: 100px;
  text-align: center;
}

.half-circle::before {
  content: "";
  margin-bottom: 5px;
  display: block;
  height: 40px;
  width: 100px;
  background: linear-gradient(to bottom, transparent 0, transparent 50%, #0072f7 50%);
  border-radius: 100%;
}

<div class="half-circle">
  My name is<br />
  somebody
</div>

另一种方法是，完全填充伪元素，并用overflow: hidden隐藏上半部分：

.half-circle {
  width: 100px;
  text-align: center;
  overflow: hidden;
}

.half-circle::before {
  content: "";
  display: block;
  height: 40px;
  width: 100px;
  background: #0072f7;
  border-radius: 100%;
  transform: translateY(-50%);
}

<div class="half-circle">
  My name is<br />
  somebody
</div>

当然，您应该使用正确的供应商前缀来实现浏览器兼容性。

Answer 3

您可以在radial-gradient中使用简单的背景，在其中可以轻松控制形状及其位置：

.box {
  width:100px;
  height:100px;
  display:inline-block;
  padding-top:25px;
  background:radial-gradient(50% 20px at top,blue 95%,transparent 100%);
}
.box-alt {
  width:100px;
  height:100px;
  display:inline-block;
  padding-top:25px;
  background:radial-gradient(40% 22px at top,blue 95%,transparent 100%);
}

.box-alt-2 {
  width:100px;
  height:100px;
  display:inline-block;
  padding-top:25px;
  background:radial-gradient(40% 22px at 50% -5px,blue 95%,transparent 100%);
}

<div class="box">
  some text here
</div>

<div class="box-alt">
  some text here
</div>

<div class="box-alt-2">
  some text here
</div>

语法为radial-gradient([horizontal radius] [vertical radius] at [position of the center point], [coloration])