SVGでセクションの区切りを斜め線にする | webOpixel
http://www.webopixel.net/html-css/1032.html

[DEMO] SVGでセクションの区切りを斜め線にする
http://www.webopixel.net/lab/sample/15/0924svg-full/section.html

バグ

コレのとおりにするとFirefoxでwidth100%にならないバグがあった。
dataURLのBase64エンコードをしてそれを読み込むようにした。

Base64エンコードをしてくれるサイト
Base64 Decode and Encode – Online
https://www.base64encode.org/

ちなみにsvg自体にwidthを入れれば良いという記事もあったけど、逆に全てのブラウザでうまく表示出来なくなったので却下。

[css]
&:before,&:after {
content: “”;
display: block;
height: 60px;
position: absolute;
bottom: 0;
z-index: 2;
width: 50%;
min-width: 720px;
// background:url(../images/sep_top.svg) center top no-repeat;
background-image:url(data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj48cGF0aCBkPSJNMCAxMDB2LTEwMGwxMDAgMTAweiIgZmlsbD0iI2ZmZiIvPjwvc3ZnPg==);
background-repeat: no-repeat;
background-size: 100% 100%;
}
&:before {
left:50%;
//回転させる
transform:rotateY(180deg);
}
&:after {
right:50%;
}
[/css]

その他

IE9-11で背景画像のSVGの表示が崩れる問題と対処法 – 週刊SVG
http://ssvvgg.net/post/140503977275/ie9-11%E3%81%A7%E8%83%8C%E6%99%AF%E7%94%BB%E5%83%8F%E3%81%AEsvg%E3%81%AE%E8%A1%A8%E7%A4%BA%E3%81%8C%E5%B4%A9%E3%82%8C%E3%82%8B%E5%95%8F%E9%A1%8C%E3%81%A8%E5%AF%BE%E5%87%A6%E6%B3%95