背景与曲线，是否可能？

Question

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

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

Answer 1

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

我们可以使用SVG的{​​{1}}元素来创建上面的形状，并用一些纯色，渐变或图案填充/描绘它。

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

• Specification
• MDN