SVGでセクションの区切りを斜め線にしたい

ワードプレス初心者です。
トップページの背景をSVGでセクションの区切りを斜め線にする
と同じようにしたいのですがhtml、svgをどこにコピペしてよいか分かりません。
試しにfunction.phpにhtmlとsvgのコードを、カスタムcssにcssコードを貼ってみましたがうまく表示されませんでした。

また、このサイトのサンプルコードではセクションが3つまでですが、自分のサイトでは5つにしたいと考えています。
使用テーマはLightning G3（無料版）です。
それぞれのコードを貼る場所、なぜうまく表示されないかをご教授ください。よろしくお願いいたします。

HTML
1<section id="section1">
2    <div class="inner">
3        <h2>Section First</h2>
4    </div>
5</section>
6<section id="section2">
7    <div class="inner">
8        <h2>Section Second</h2>
9    </div>
10</section>
11<section id="section3">
12    <div class="inner">
13        <h2>Section Third</h2>
14    </div>
15</section>

separate1.svg
1<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 100 100" preserveAspectRatio="none">
2  <path d="M0,100 v-100 L100,100 Z" fill="#cf6a80" />
3</svg>

separate2.svg
1<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 100 100" preserveAspectRatio="none">
2    <path d="M0,100 h100 v-100 Z" fill="#61c06a" />
3</svg>

CSS
1section {
2    color: #fff;
3    padding-bottom: 150px;
4}
5#section1 {
6    background-color: #5ba4cf;
7}
8#section2 {
9    background-color: #cf6a80;
10}
11#section3 {
12    background-color: #61c06a;
13}
14section:after {
15    content: "";
16    background-repeat: no-repeat;
17    display: block;
18    height: 150px;
19    position: absolute;
20    width: 100%;
21}
22#section1:after {
23    background: url("svg/separate1.svg");
24}
25#section2:after {
26    background: url("svg/separate2.svg");
27}
28#section3:after {
29    background: url("svg/separate3.svg");
30}

行動規範の内容に同意します

回答1件

ベストアンサー

background: url("svg/separate1.svg")というように相対パスで指定していますが、Wordpressなら絶対パスで指定した方がいいように思います。

直接の回答ではなく、別案ですが、CSSの clip-path を使えば、SVGファイルを用意することなく簡単に実現できます。IEは非対応ですが、もうサポートが終了しているので無視してもいいでしょう。

コード例

css
1section {
2  color: #fff;
3  padding-bottom: 150px;
4  position: relative;
5}
6#section1 {
7  background-color: #5ba4cf;
8}
9#section2 {
10  background-color: #cf6a80;
11}
12#section3 {
13  background-color: #61c06a;
14}
15section:after {
16  content: "";
17  position: absolute;
18  display: block;
19  height: 150px;
20  width: 100%;
21  bottom: 0;
22}
23#section1:after {
24  background-color: #cf6a80;
25  clip-path: polygon(0 0, 0% 100%, 100% 100%);
26}
27#section2:after {
28  background-color: #61c06a;
29  clip-path: polygon(100% 0, 0% 100%, 100% 100%);
30}
31#section3:after {
32  background-color: #fff;
33  clip-path: polygon(0 0, 0% 100%, 100% 100%);;
34}