I've used a few clip-path polygon shapes to create downward pointing content boxes on my site, you can see a few examples on the home page here: http://550.9f2.myftpupload.com/ and this is the CSS I'm using:
.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);
}
But I understand this doesn't work in Firefox without some modifications (like using a .svg URL?) and that even this doesn't work in IE and Edge. Is there an alternative CSS trick I can use to make these shapes that has better cross-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;
}