как сделать полукруг на заднем плане для div в ионном?

Question

Кто-нибудь знает, как сделать полукруг для фонового изображения в ионном, как показано на рисунке?

Я пытался создать его скод ниже, но это не для моего случая.

<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

Вы можете создать эту форму, используя псевдоэлемент ::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 2

Вы можете использовать простой фон с 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])

Answer 3

Как то так?

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