【发布时间】：2020-12-07 23:49:40
【问题描述】：
前言
我有一个部分，其中内容的底部和末尾有渐变背景和波浪。通常我会将每个波形导出为 svg 并将其放在 :before 和 :after 元素中，以便它可以在不同的视口中很好地缩放。但是，由于我需要所有元素的渐变，所以我选择了剪辑路径。
问题：
目前，由于高度是自动的（取决于内容），因此在较小的视口处波浪会大得多。有没有办法缩放波浪？我尝试将剪辑路径缩放得更小，但这会使背景更小，因此一些内容消失了。
代码笔：
https://codepen.io/ainsleyclark/pen/MWyeNQo?editors=1100
section {
background: #fbbe34;
background: linear-gradient(144deg, blue 0%, #719dc6 100%);
clip-path: url(#wave-clippath);
-webkit-clip-path: url(#wave-clippath);
height: auto;
display: flex;
align-items: center;
padding: 100px;
} <!-- Wave - Clippath -->
<svg width="0" height="0" preserveAspectRatio="none">
<clipPath id="wave-clippath" clipPathUnits="objectBoundingBox">
<path d="M0.895,1 c-0.061,0,-0.123,-0.006,-0.184,-0.019 c-0.039,-0.008,-0.079,-0.019,-0.117,-0.029 h0 l0,0,0,0 h0 c-0.043,-0.011,-0.087,-0.023,-0.131,-0.032 a2,10,0,0,0,-0.078,-0.011 a3,10,0,0,0,-0.078,-0.004 c-0.026,0,-0.052,0.001,-0.078,0.004 a2,10,0,0,0,-0.077,0.011 a2,9,0,0,0,-0.076,0.018 C0.05,0.945,0.024,0.954,0,0.963 V0.83 h1 V0.83 H0 V0.17 h1 v0 H0 V0.006 C0.034,0.002,0.07,0,0.105,0 c0.061,0,0.123,0.006,0.184,0.019 c0.039,0.008,0.079,0.018,0.117,0.029 h0 l0,0 h0 l0,0 c0.043,0.011,0.087,0.023,0.131,0.032 a2,10,0,0,0,0.078,0.011 a3,10,0,0,0,0.078,0.004 c0.026,0,0.052,-0.001,0.078,-0.004 c0.026,-0.002,0.052,-0.006,0.077,-0.011 a2,9,0,0,0,0.076,-0.018 c0.025,-0.007,0.05,-0.015,0.075,-0.024 V0.994 c-0.034,0.004,-0.07,0.006,-0.105,0.006"></path>
</clipPath>
</svg>
<section class="section">
<div class="text">
nunc. Ut pellentesque interdum arcu, vel fermentum nunc consectetur vel. Integer dictum leo cursus euismod lacinia. Nulla facilisi. Nunc a fringilla magna. Vestibulum eget interdum ipsum, ut rutrum augue. Ut egestas volutpat nulla, efficitur facilisis ante hendrerit non. Quisque venenatis iaculis commodo.
Morbi pellentesque rhoncus diam, non tristique lectus placerat in. Morbi elementum faucibus ex sit amet hendrerit. Nunc gravida mollis ex eu dapibus. Mauris in tellus nec mauris mollis blandit at porta ipsum. Donec suscipit felis ac mauris rhoncus lacinia. Quisque et lectus enim. Mauris condimentum ex id justo tristique interdum. Sed nec nibh sed nibh pretium lacinia tempus at elit. Ut lobortis ornare scelerisque. Etiam bibendum nec erat eu pulvinar. Fusce iaculis dolor nec mauris fermentum dictum at ac nulla.
Phasellus fringilla eros ac lacinia lacinia. Proin commodo mattis consectetur. Ut vel quam euismod orci mollis cursus congue quis felis. Morbi viverra turpis ac arcu euismod, a pharetra lacus dapibus. Etiam tristique posuere turpis, nec consequat urna commodo eget. Nulla facilisi. Sed sodales elementum aliquet. Pellentesque nisi erat, consectetur sit amet elementum vulputate, vestibulum ac ex. Phasellus vel neque ac lectus molestie
nunc. Ut pellentesque interdum arcu, vel fermentum nunc consectetur vel. Integer dictum leo cursus euismod lacinia. Nulla facilisi. Nunc a fringilla magna. Vestibulum eget interdum ipsum, ut rutrum augue. Ut egestas volutpat nulla, efficitur facilisis ante hendrerit non. Quisque venenatis iaculis commodo.
Morbi pellentesque rhoncus diam, non tristique lectus placerat in. Morbi elementum faucibus ex sit amet hendrerit. Nunc gravida mollis ex eu dapibus. Mauris in tellus nec mauris mollis blandit at porta ipsum. Donec suscipit felis ac mauris rhoncus lacinia. Quisque et lectus enim. Mauris condimentum ex id justo tristique interdum. Sed nec nibh sed nibh pretium lacinia tempus at elit. Ut lobortis ornare scelerisque. Etiam bibendum nec erat eu pulvinar. Fusce iaculis dolor nec mauris fermentum dictum at ac nulla.
Phasellus fringilla eros ac lacinia lacinia. Proin commodo mattis consectetur. Ut vel quam euismod orci mollis cursus congue quis felis. Morbi viverra turpis ac arcu euismod, a pharetra lacus dapibus. Etiam tristique posuere turpis, nec consequat urna commodo eget. Nulla facilisi. Sed sodales elementum aliquet. Pellentesque nisi erat, consectetur sit amet elementum vulputate, vestibulum ac ex. Phasellus vel neque ac lectus molestie
nunc. Ut pellentesque interdum arcu, vel fermentum nunc consectetur vel. Integer dictum leo cursus euismod lacinia. Nulla facilisi. Nunc a fringilla magna. Vestibulum eget interdum ipsum, ut rutrum augue. Ut egestas volutpat nulla, efficitur facilisis ante hendrerit non. Quisque venenatis iaculis commodo.
Morbi pellentesque rhoncus diam, non tristique lectus placerat in. Morbi elementum faucibus ex sit amet hendrerit. Nunc gravida mollis ex eu dapibus. Mauris in tellus nec mauris mollis blandit at porta ipsum. Donec suscipit felis ac mauris rhoncus lacinia. Quisque et lectus enim. Mauris condimentum ex id justo tristique interdum. Sed nec nibh sed nibh pretium lacinia tempus at elit. Ut lobortis ornare scelerisque. Etiam bibendum nec erat eu pulvinar. Fusce iaculis dolor nec mauris fermentum dictum at ac nulla.
Phasellus fringilla eros ac lacinia lacinia. Proin commodo mattis consectetur. Ut vel quam euismod orci mollis cursus congue quis felis. Morbi viverra turpis ac arcu euismod, a pharetra lacus dapibus. Etiam tristique posuere turpis, nec consequat urna commodo eget. Nulla facilisi. Sed sodales elementum aliquet. Pellentesque nisi erat, consectetur sit amet elementum vulputate, vestibulum ac ex. Phasellus vel neque ac lectus molestie
nunc. Ut pellentesque interdum arcu, vel fermentum nunc consectetur vel. Integer dictum leo cursus euismod lacinia. Nulla facilisi. Nunc a fringilla magna. Vestibulum eget interdum ipsum, ut rutrum augue. Ut egestas volutpat nulla, efficitur facilisis ante hendrerit non. Quisque venenatis iaculis commodo.
Morbi pellentesque rhoncus diam, non tristique lectus placerat in. Morbi elementum faucibus ex sit amet hendrerit. Nunc gravida mollis ex eu dapibus. Mauris in tellus nec mauris mollis blandit at porta ipsum. Donec suscipit felis ac mauris rhoncus lacinia. Quisque et lectus enim. Mauris condimentum ex id justo tristique interdum. Sed nec nibh sed nibh pretium lacinia tempus at elit. Ut lobortis ornare scelerisque. Etiam bibendum nec erat eu pulvinar. Fusce iaculis dolor nec mauris fermentum dictum at ac nulla.
Phasellus fringilla eros ac lacinia lacinia. Proin commodo mattis consectetur. Ut vel quam euismod orci mollis cursus congue quis felis. Morbi viverra turpis ac arcu euismod, a pharetra lacus dapibus. Etiam tristique posuere turpis, nec consequat urna commodo eget. Nulla facilisi. Sed sodales elementum aliquet. Pellentesque nisi erat, consectetur sit amet elementum vulputate, vestibulum ac ex. Phasellus vel neque ac lectus molestie
nunc. Ut pellentesque interdum arcu, vel fermentum nunc consectetur vel. Integer dictum leo cursus euismod lacinia. Nulla facilisi. Nunc a fringilla magna. Vestibulum eget interdum ipsum, ut rutrum augue. Ut egestas volutpat nulla, efficitur facilisis ante hendrerit non. Quisque venenatis iaculis commodo.
Morbi pellentesque rhoncus diam, non tristique lectus placerat in. Morbi elementum faucibus ex sit amet hendrerit. Nunc gravida mollis ex eu dapibus. Mauris in tellus nec mauris mollis blandit at porta ipsum. Donec suscipit felis ac mauris rhoncus lacinia. Quisque et lectus enim. Mauris condimentum ex id justo tristique interdum. Sed nec nibh sed nibh pretium lacinia tempus at elit. Ut lobortis ornare scelerisque. Etiam bibendum nec erat eu pulvinar. Fusce iaculis dolor nec mauris fermentum dictum at ac nulla.
Phasellus fringilla eros ac lacinia lacinia. Proin commodo mattis consectetur. Ut vel quam euismod orci mollis cursus congue quis felis. Morbi viverra turpis ac arcu euismod, a pharetra lacus dapibus. Etiam tristique posuere turpis, nec consequat urna commodo eget. Nulla facilisi. Sed sodales elementum aliquet. Pellentesque nisi erat, consectetur sit amet elementum vulputate, vestibulum ac ex. Phasellus vel neque ac lectus molestiefermentum.
</div>
</section>提前致谢！
【问题讨论】：