CSS半圆背景

Question

我想要达到的目标: image link

我的代码目前的样子:

.half-circle {
  background-color: white;
}

<div style="background-color: black;">
  <div class="half-circle">
    <img src="https://i.imgur.com/WBtkahj.png" />
  </div>
</div>
<div>Some text here that should't be moved</div>

我试过使用白色背景和 500 半径的填充，但它会将文本向下推。

Answer 1

可以看看radial-gradient()并稍微调整尺寸

.half-circle {
  min-height: 12vw;
  padding-bottom: 4%;
  background: radial-gradient(circle at top, white 17vw, transparent 17.1vw)
}

.half-circle img {
  display: block;
  margin: auto;
  max-width: 15vw
}

<div style="background-color: black;">
  <div class="half-circle">
    <img src="https://i.imgur.com/WBtkahj.png" />
  </div>
</div>
<div>Some text here that should'nt be moved</div>