如何将自定义波浪形分隔线添加到部分答案

【问题标题】：How to add custom wavy shape divider to a section如何将自定义波浪形分隔线添加到部分
【发布时间】：2019-01-27 10:51:35
【问题描述】：

我正在尝试添加一个具有透明背景颜色的部分，背景图像也具有形状分隔符。

我做了什么。

我使用 elementor 插件作为波形分割器，但它并没有按照我喜欢的方式工作。

elementor 生成的代码。

<div class="elementor-shape elementor-shape-bottom" data-negative="false">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 100" preserveAspectRatio="none">
    <path class="elementor-shape-fill" d="M421.9,6.5c22.6-2.5,51.5,0.4,75.5,5.3c23.6,4.9,70.9,23.5,100.5,35.7c75.8,32.2,133.7,44.5,192.6,49.7
    c23.6,2.1,48.7,3.5,103.4-2.5c54.7-6,106.2-25.6,106.2-25.6V0H0v30.3c0,0,72,32.6,158.4,30.5c39.2-0.7,92.8-6.7,134-22.4
    c21.2-8.1,52.2-18.2,79.7-24.2C399.3,7.9,411.6,7.5,421.9,6.5z"></path>
</svg>      </div>

我需要什么。

我需要形状分隔符应该与部分背景完全融合，以便它可以具有单一外观。

并且形状分隔线的颜色必须像剖面背景。

这是我需要创建的。

【问题讨论】：

你已经尝试过什么？把相关代码贴在这里看this information on asking a good question。
提供到目前为止您尝试过的代码，这使得提供与您的代码相关的解决方案变得更加容易
Wavy shape with css的可能重复
我用过wordpress
@Gerard 不一样

标签： html css svg adobe-illustrator

【解决方案1】：

这是我需要的 SVG 代码

 <?xml version="1.0" encoding="utf-8"?>
    <!-- Generator: Adobe Illustrator 22.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
    <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
    	 viewBox="0 0 1502.1 1320.3" style="enable-background:new 0 0 1502.1 1320.3;" xml:space="preserve">
    <style type="text/css">
    	.st0{clip-path:url(#SVGID_2_);fill:url(#SVGID_3_);}
    </style>
    <g>
    	<defs>
    		<path id="SVGID_1_" d="M0,26.9c134.3,4.6,658.6,50.7,732.3,57.7c0-2.2,769.8-27.1,769.8-24.9c0.2,13.7,0,1260.6,0,1260.6L0,1320.3
    			C0,1320.3,0,26.9,0,26.9z"/>
    	</defs>
    	<clipPath id="SVGID_2_">
    		<use xlink:href="#SVGID_1_"  style="overflow:visible;"/>
    	</clipPath>
    	<g style="clip-path:url(#SVGID_2_);">
    		
    			<image style="overflow:visible;" width="1476" height="692" xlink:href="86E00C1C.jpg"  transform="matrix(1.4941 0 0 1.8796 -349.3057 19.601)">
    		</image>
    	</g>
    	
    		<linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="28.1822" y1="-181.5918" x2="1530.3799" y2="-181.5918" gradientTransform="matrix(1 0 0 -1 0 492)">
    		<stop  offset="0.14" style="stop-color:#662D91;stop-opacity:0.72"/>
    		<stop  offset="0.26" style="stop-color:#5F3194;stop-opacity:0.76"/>
    		<stop  offset="0.44" style="stop-color:#4D3D9C;stop-opacity:0.86"/>
    		<stop  offset="0.44" style="stop-color:#4C3E9C;stop-opacity:0.86"/>
    		<stop  offset="0.56" style="stop-color:#3051A8;stop-opacity:0.8"/>
    		<stop  offset="0.73" style="stop-color:#0071BC;stop-opacity:0.7"/>
    		<stop  offset="0.93" style="stop-color:#096BB8;stop-opacity:0.9"/>
    	</linearGradient>
    	<rect x="0" y="26.9" class="st0" width="1502.2" height="1293.4"/>
    </g>
    <title>backSVG</title>
    </svg>

这是 PNG

【讨论】：