Menu
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?
498
Support for clip-path in SVG is supported in all browsers with basic SVG support. 1 Partial support refers to only supporting the url() syntax.
The path() value allows us to use an SVG path to clip a specific area. For now, the browser support is inconsistent. To make it work across different browsers, we need to use an inline SVG, and then use the url() as a value for clip-path . In CSS, we need to append the path using url() value.
The <clipPath> SVG element defines a clipping path, to be used by the clip-path property. A clipping path restricts the region to which paint can be applied. Conceptually, parts of the drawing that lie outside of the region bounded by the clipping path are not drawn.
The clip-path property in CSS allows you to specify a specific region of an element to display, with the rest being hidden (or “clipped”) away. There used to be a clip property, but note that is deprecated. The most common use case would be an image, but it's not limited to that.
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!
157
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
