具有平滑度css的背景形状[重复]答案

【问题标题】：background shape with smoothness css [duplicate]具有平滑度css的背景形状[重复]
【发布时间】：2021-07-25 17:26:06
【问题描述】：

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

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

【问题讨论】：

欢迎堆栈溢出请添加最小可重现示例
试试background-image: radial-gradient(circle farthest-corner at 50% -249%, #117FC8 90%, white 92%)
谢谢。我发现了我的错误。我用了 90.1% 的白色。你的回答给了我这个想法。

【解决方案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
}

&lt;div&gt;&lt;/div&gt;

【讨论】：

感谢您的回答，但我分享的图像是全宽页面，我想将此形状创建为背景图像。我尝试了您的解决方案，但它会覆盖我此页面的内容。
请与 sn-p 分享您的代码。 FFI

【解决方案2】：

您可以使用 SVG 形状而不是 CSS 形状。 MDN reference

【讨论】：