具有 2 种颜色的 CSS 背景

【问题标题】：CSS Background with 2 colors具有 2 种颜色的 CSS 背景
【发布时间】：2022-10-31 04:01:27
【问题描述】：

我想创建一个像这个例子一样的背景；

我试过这段代码

.home {
  height: 100vh;
  margin: 0;
  background-image: radial-gradient(
    120% 100% at top left,
    #272934 61%,
    #272934 92%,
    transparent 92%
  );
  background-repeat: no-repeat;
}

  <section class="home py-4" style="background-color: #1DC44F;">
    <div class="container-lg">
      <div class="row min-vh-100 align-items-center align-content-center">
      </div>
    </div>
  </section>

【问题讨论】：

相关：stackoverflow.com/a/49670229/8620333

标签： html css colors background background-color

【解决方案1】：

一个人可以在 CSS 中做形状，但不能做任何形状，我之前尝试过并且坐了无数个小时，然后才走 svg 和额外字节的路线。也许最好使用 svg 图像而不是尝试利用完整的 CSS。我会推荐 canvas / svg 路线，通过在例如中制作自定义 svg 来成功实现它。 Adobe Illustrator 甚至 Figma。如果您想尝试完整的 css 方式，可以尝试在 js fiddle 中使用 CSS。

这是几年前 Stack 上的 post：CSS 与 SVG。

这是一个blog post 比较 CSS 和 SVG。

【讨论】：