如何使用CSS在图像中心设置半圆？

Question

是否可以在任何图片中设置这样的CSS？

我需要在图像中创建一个带有半圆效果的图像。是否可以使用CSS？

Answer 1

因为 GRADIENTS FTW

div{
  display: inline-block;
  color: white;
  padding: 40px 50px 20px;
  background: radial-gradient(circle at top, white 14px, #0091C9 15px);
  border-radius: 10px 10px 0 0;
}

<div>WOOHOO</div>

Answer 2

使用border-radius（根据需要更改大小值和颜色）

#cont {
  width: 250px;
  height: 150px;
  background: navy;
  position: relative;
  border-radius: 20px 20px 0 0;
  -webkit-border-radius: 20px 20px 0 0;
  text-align: center;
}

.text {
  color: white;
  font-weight: 900;
  position: absolute;
  top: 60px;
  right:0;
  left:0;
  text-align: center;
}

.circle {
  background: white;
  position: absolute;
  top: -15px;
  left: 110px;
  width: 30px;
  height: 30px;
  -webkit-border-radius: 20px;
  border-radius: 20px;
}

<div id="cont">
<div class="circle"></div>
<div class="text"> Text</div>
</div>