CSS剪辑路径在Firefox中不起作用

Question

我用CSS剪辑路径创建了一个三角形水印，但它没有在Firefox中渲染。 它适用于谷歌浏览器。

这是我的css：

.displaywatermark2 {
-webkit-clip-path: url("#clip-shape");
clip-path: url("#clip-shape");
-webkit-clip-path: polygon(0% 0%, 0% 100%, 100% 100%);
clip-path: polygon(0% 0%, 0% 100%, 100% 100%);}

我还将此代码添加到我的phtml中：

<div class="displaywatermark2" id="<?php echo $block->getProduct()->getTypeId(); ?>watermark"></div>
        <svg class="clip-svg" width="0" height="0">

            <clipPath id="clip-shape" clipPathUnits="objectBoundingBox">
              <polygon points="0 100,100 100,100 100,0 0" />
            </clipPath>

        </svg>

这是Firefox中的一个已知错误，还是我在代码中写错了？任何其他建议作为创建三角形div的替代方法？