css - 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>