缩放时如何保持 svg 剪辑路径的纵横比
How to preserve aspect ratio of an svg clip path when scaled
前言
我有一个部分，其中的内容具有渐变背景，并且在内容的底部和结尾处有波浪。通常我会将每个 wave 导出为 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>
提前致谢！
我会使用两个 SVG 和多个掩码而不是 clip-path。
这是我将要使用的 SVG。它们与您的不完全相同，但您可以轻松编辑它们
svg {
border:2px solid;
}
<svg mlns='http://www.w3.org/2000/svg' viewBox="0 0 64 17">
<path d='M0 10 C30 28 38 0 64 10 L64 0 L0 0 Z' fill="red"/>
</svg>
<svg mlns='http://www.w3.org/2000/svg' viewBox="0 0 64 17">
<path transform="scale(-1)" transform-origin="center" d='M0 10 C30 28 38 0 64 10 L64 0 L0 0 Z' fill="red"/>
</svg>
这是使用上述内部掩码的代码。您将需要 3 层。顶部和底部的 SVG 和中间的简单渐变填充 space:
section {
background: linear-gradient(144deg, blue 0%, #719dc6 100%);
-webkit-mask:
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 17'><path d='M0 10 C30 28 38 0 64 10 L64 0 L0 0 Z' fill='white'/></svg>") bottom/100% auto,
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 17'><path transform='scale(-1)' transform-origin='center' d='M0 10 C30 28 38 0 64 10 L64 0 L0 0 Z' fill='white'/></svg>") top/100% auto,
linear-gradient(white 0 0) center/100% calc(100% - 2*17vw);
-webkit-mask-repeat:no-repeat;
padding:18vw 50px; /* 18vw is an approximation of the SVG height considering the ratio*/
}
<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>
前言
我有一个部分，其中的内容具有渐变背景，并且在内容的底部和结尾处有波浪。通常我会将每个 wave 导出为 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>
提前致谢！
我会使用两个 SVG 和多个掩码而不是 clip-path。
这是我将要使用的 SVG。它们与您的不完全相同，但您可以轻松编辑它们
svg {
border:2px solid;
}
<svg mlns='http://www.w3.org/2000/svg' viewBox="0 0 64 17">
<path d='M0 10 C30 28 38 0 64 10 L64 0 L0 0 Z' fill="red"/>
</svg>
<svg mlns='http://www.w3.org/2000/svg' viewBox="0 0 64 17">
<path transform="scale(-1)" transform-origin="center" d='M0 10 C30 28 38 0 64 10 L64 0 L0 0 Z' fill="red"/>
</svg>
这是使用上述内部掩码的代码。您将需要 3 层。顶部和底部的 SVG 和中间的简单渐变填充 space:
section {
background: linear-gradient(144deg, blue 0%, #719dc6 100%);
-webkit-mask:
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 17'><path d='M0 10 C30 28 38 0 64 10 L64 0 L0 0 Z' fill='white'/></svg>") bottom/100% auto,
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 17'><path transform='scale(-1)' transform-origin='center' d='M0 10 C30 28 38 0 64 10 L64 0 L0 0 Z' fill='white'/></svg>") top/100% auto,
linear-gradient(white 0 0) center/100% calc(100% - 2*17vw);
-webkit-mask-repeat:no-repeat;
padding:18vw 50px; /* 18vw is an approximation of the SVG height considering the ratio*/
}
<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>