Another con for clip-path is that you can't use box-shadow to create a shadow (you can use filter: drop-shadow() instead).
clip-path
box-shadow
filter: drop-shadow()
Outside of the realm of CSS art, I reach for SVG most of the time.
I agree, but one thing: clip-path will hide the shadow from a filter too.
If you extend the clip-path beyond the base, you can include it.
Something like this gives you a 2px drop shadow..
.triangle { background-color: red; width: 200px; height: 100px; margin: 0 auto; clip-path: polygon(50% 0%, 0% 200%, 100% 200%); filter: drop-shadow(0px 2px 0 black); }
jsfiddle.net/robjoeol/68d350zr/9/
Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment's permalink.
Hide child comments as well
Confirm
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
Another con for
clip-path
is that you can't usebox-shadow
to create a shadow (you can usefilter: drop-shadow()
instead).Outside of the realm of CSS art, I reach for SVG most of the time.
I agree, but one thing:
clip-path
will hide the shadow from a filter too.If you extend the clip-path beyond the base, you can include it.
Something like this gives you a 2px drop shadow..
jsfiddle.net/robjoeol/68d350zr/9/