Alternative to Clip-Path with universal browser support?

I ran into this issue building this site here http://mindcloak.com/vici/.

My way around this was to hide clip-paths on these browsers and use css shapes.

regular clip-path

.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 shapes to show for non supported browsers

/* 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 Browser Support */@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;    }

This question recently got a bump because it was unanswered. In 2020, we're living in a world where clip-path is almost universally supported. So I think it's safe to say the browsers have caught up and the case is closed!