css - 如何在 ionic 中为 div 的背景制作半圆？

Question

有谁知道如何在 ionic 中为 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

您可以使用简单的背景 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([水平半径] [垂直半径] at [中心点的位置], [coloration])