I used several clip polygons to create subordinate pointing content boxes on my site, here you can see some examples on this page: http://550.9f2.myftpupload.com/ , and this is the CSS that I use:
.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 that this does not work in Firefox without any changes (for example, using the .svg URL?) And that even this does not work in IE and Edge. Is there any other CSS trick I can use to create these forms that have better cross browser support?
source
share