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

Question

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

我需要在图像中创建具有这种半圆形效果的图像。可以用CSS做吗？

标签： css

Answer 1

因为渐变 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>