带SVG的倒置透明三角形

Question

我正在尝试制作横幅广告。它工作得很好，但不适用于Firefox。如何在Firefox中实现相同的效果并保留我的文本？例如，使用SVG？

示例：

.top-box {
  -webkit-clip-path: polygon(100% 0, 100% 100%, 50% 90%, 0 100%, 0 0);
  clip-path: polygon(100% 0, 100% 100%, 50% 90%, 0 100%, 0 0);
  background-color: black;
  color: white;
  height: 150px;
}

<div class="top-box">
  <p>Some text ...</p>
</div>