css - 使用 SVG 剪切流体背景图形

Question

我在 Wordpress 中新创建的 Site Origin 小部件中使用以下代码。

<div class="svg-container row-svg row-separator" style="fill:<?php echo $sep_fill; ?>">
        <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 100 100" preserveAspectRatio="none">
            <path d="M0 0 L100 0 L100 2 L0 100 Z"></path>
        </svg>
    </div>

使用以下 CSS...

.row-separator {
margin-top: 0 !important;
margin-bottom: -175px !important;
height: 175px;
}
.svg-container {
height: 0;
position: relative;
z-index: 99;
}
svg:not(:root) {
overflow: hidden;
}
svg {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
}

这很好地修剪了这样的背景图像：

我需要做的是让脚看起来像这样，所以需要一条不同的路径。有谁知道如何以三角形为中心指定这样的 SVG 路径？

或者有没有其他方法可以达到同样的效果？？

问候，

鲍勃

帮助将不胜感激，因为我不确定这是否可能？

问候，

鲍勃

Answer 1

基本的 SVG 指南可以在https://www.w3.org/TR/SVG/paths.html找到

它是针对初学者的。如需更详细的外观，请考虑购买以下书籍：

SVG Essentials - J. David Eisenberg

用于复杂 SVG 轮廓等 Inkscape 的软件。