CSS clip-path doesn't work in Firefox

Question

I have created a triangle watermark with CSS clip-path, but it's not rendered in Firefox. It works fine with Google Chrome.

Here is my 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%);}

I've also added this code into my 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>

Is this an known bug in Firefox or I have written something wrong into my code? Any other suggestion as alternative to create a triangle div?