Alternative zu Clip-Path mit universeller Browserunterstützung?

Ich habe ein paar Clip-Pfad-Polygonformen verwendet, um auf meiner Website nach unten zeigende Inhaltsfelder zu erstellen. Sie können hier einige Beispiele auf der Homepage sehen: http://550.9f2.myftpupload.com/ und das ist das CSS, das ich verwende:

.bottom_arrow {
-webkit-clip-path: polygon(100% 0, 100% 85%, 50% 100%, 0 85%, 0 0);
clip-path: polygon(100% 0, 100% 85%, 50% 100%, 0 85%, 0 0);
}

Aber ich verstehe, dass dies in Firefox ohne einige Änderungen (wie die Verwendung einer .svg-URL?) Nicht funktioniert und dass selbst dies in IE und Edge nicht funktioniert. Gibt es einen alternativen CSS-Trick, mit dem ich diese Formen erstellen kann, der eine bessere browserübergreifende Unterstützung bietet?

Diese Frage hat kürzlich einen Stoß bekommen, weil sie unbeantwortet war. Im Jahr 2020 leben wir in einer Welt, in der clip-path ist fast überall unterstützt. Ich denke also, man kann mit Sicherheit sagen, dass die Browser aufgeholt haben und der Fall abgeschlossen ist!

Ich bin auf dieses Problem gestoßen, als ich diese Seite hier erstellt habe http://mindcloak.com/vici/.

Mein Weg, dies zu umgehen, bestand darin, Clip-Pfade in diesen Browsern auszublenden und CSS-Formen zu verwenden.

regulärer Clip-Pfad

.tri-green-left {
    width: 101%;
    height: 400px;
    position: absolute;
    z-index: 15;
    background: rgba(93,140,127,0.7);
    -webkit-clip-path: polygon(0 0, 5% 0, 25% 100%, 0 100%);
    clip-path: polygon(0 0, 5% 0, 25% 100%, 0 100%);
}

css-Formen, die für nicht unterstützte Browser angezeigt werden sollen

/* IE 10+ Styling Stuff */ @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {

    #triangle-greenleft {
        width: 0;
        height: 0;
        margin-top: -50px;
        border-bottom: 900px solid rgba(93,140,127,0.7);
        border-right: 750px solid transparent;
        overflow: hidden;
    }

/* Egde-Browserunterstützung */ @supports (-ms-ime-align:auto) {

    #triangle-greenleft {
        width: 0;
        height: 0;
        border-bottom: 700px solid rgba(93,140,127,0.7);
        border-right: 200px solid transparent;
        overflow: hidden;
    }