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

如果您为SELECT id INTO MyTableVar FROM Users LEFT JOIN ItemInstances_DocumentInstance ON Author_Id = Users.Id LEFT JOIN TastInstanceUser ON CompletedBy_Id = Users.Id WHERE Author_Id IS NULL AND CompletedBy_Id IS NULL AND Cust_Id IS NULL AND Id > 4分别设置.half-circle和border-bottom-left-radius，则可以使用CSS来实现。这样会将形状的底角四舍五入为一个半圆。我还添加了一些额外的样式，以使您的屏幕截图更好一些。

border-bottom-right-radius

.container {
  padding-bottom: 10px;
  text-align: center;
}

.half-circle {
  background-color: white;
  margin: 0 auto;
  height: 100px;
  width: 400px;
  border-bottom-left-radius: 800px;
  border-bottom-right-radius: 800px;
  padding: 10px 0 20px;
  text-align: center;
}
   
img {
  max-height: 100%;
  width: auto;
}

Answer 2

您可以看看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>

CSS半圈背景

2 个答案: