css - CSS半圆背景

Question

我想要实现的目标： 图片链接

我的代码目前的样子：

.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 半径的填充，但它会将文本向下推。

标签： css

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>