css - 具有平滑度 css 的背景形状

Question

如何在背景中创建这个形状。我尝试使用径向渐变，但仍然不存在圆形的平滑度。我也尝试了剪辑路径，但它正在剪切此页面上的其他图像。我想要这个形状作为我的背景颜色。有什么办法吗？

我使用了背景图像：径向渐变（圆形最远角在 50% -249%，#117FC8, 90%，白色 55%）。但是在这个圆形有一点正方形。我想要平滑的曲线。

标签： cssbackground-colorcss-shapes

Answer 1

在这里我用来::before创建那个形状

div {
  position: relative;
  height: 200px;
  width: 300px;
  border: 1px solid #000;
  overflow: hidden
}
div::before {
  content: '';
  position: absolute;
  height: 300px;
  width: 600px;
  background-color: #00f;
  border-radius: 50%;
  bottom: 60px;
  left: -150px
}

<div></div>