带曲线的背景，有可能吗？答案

【问题标题】：Background with curved line, Is it possible?带曲线的背景，有可能吗？
【发布时间】：2018-02-24 08:09:06
【问题描述】：

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

我需要知道我是否可以在 CSS 中执行附加图像中的操作？如果是，请问如何？

【问题讨论】：

对此类形状使用SVG。
SVG 用于拉伸到 100% 的曲线...仅 CSS 的解决方案不可用

标签： html css sass css-shapes

【解决方案1】：

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

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

d 元素中只有一个属性 d 用于定义形状。该属性本身包含一些简短的命令和一些使这些命令起作用所必需的参数。

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

<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 的一些有用链接：

【讨论】：