Question

我需要帮助设计类似于this image的项目中的页脚形状。请帮我。如何使用html和css设计类似于wave的形状。可以使用border-radius或使用SVG吗？

是否有可能做出回应？

我的svg代码：

<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
 width="100%" height="200px" viewBox="0 0 1366 432"
 preserveAspectRatio="xMidYMid meet">
<g transform="translate(0.000000,432.000000) scale(0.100000,-0.100000)"
fill="#000000" stroke="none">
<path d="M0 1710 l0 -1710 10000 0 10000 0 0 114 0 113 -127 100 c-833 653
-1848 1155 -2883 1427 -681 179 -1808 322 -3055 388 -328 18 -1972 18 -2340 0
-1091 -51 -1781 -111 -3645 -317 -1898 -209 -2407 -249 -3230 -249 -682 -1
-1004 26 -1490 125 -1101 225 -2207 812 -2996 1590 l-131 129 -51 0 -52 0 0
-1710z"/>
</g>
</svg>

但不满。 try it

Answer 1

更新您的SVG文件。变化：

preserveAspectRatio="xMidYMid meet"

到

preserveAspectRatio="none"

Answer 2

用纯粹的css来解决这个问题可能很棘手。如果你真的想使用CSS，我会尝试在线使用CSS形状构建工具。

这会有帮助吗？ http://html-generator.weebly.com/css-shape-generator.html#y

如何使用html和css设计类似于wave的形状？

2 个答案: