与曲线的背景，可能吗？

Question

我应该花时间在 CSS 中找到解决方案来应用它，还是只添加为静态背景图像。

我想知道我是否可以像 CSS 中的附图那样做？如果是，请问如何？

Answer 1

SVG 是创建此类形状的推荐方法。它提供简单性和可扩展性。

我们可以使用 SVG 的 path 元素创建一个像上面那样的形状，并用一些纯色、渐变或图案填充/勾勒它。

只有一个属性 d 用于定义 path 元素中的形状。此属性本身包含许多短命令和这些命令运行所需的几个参数。

以下代码将创建上述形状：

<path d="M-10,43
         Q7,40 18,30
         T42,41 T65,64 T92,32 T133,31 T167,17 T218,61 
         V240 H-180 Z" />

下面是上面代码中使用的 path 命令的简要说明：

M命令用于定义起点。它出现在开头并指定绘图的起点。
Q和T命令用于绘制曲线。
V和H命令用于绘制直线。
Z命令用于关闭当前路径。它从当前点到起点绘制一条直线以闭合形状。

输出图像：

工作示例：

body {
  text-align: center;
  background: #ddd;
}

<svg width="175" height="230" viewBox="0 0 175 230" preserveAspectRatio="xMidYMin slice">
  <defs>
    <linearGradient id="grad" x2="0" y2="1">
      <stop offset="0" stop-color="#f5e2ed" />
      <stop offset="1" stop-color="#fff" />
    </linearGradient>
  </defs>
  <path stroke="#f280ab" stroke-width="3" fill="url('#grad')"
        d="M-10,43
           Q7,40 18,30
           T42,41 T65,64 T92,32 T133,31 T167,17 T218,61 
           V240 H-180 Z" />
</svg>

有用资源：

以下是 SVG 的一些有用链接：

与曲线的背景，可能吗？

Background with curved line, Is it possible?

html

css

sass

css-shapes