Divs with skewed backgrounds
Got a design I have to code that includes quite a lot of divs with some kind of skewed edge (see pics for examples). Would just like some input on how to best tackle this. I'm thinking either background images or using :before and :after pseudo elements with css skew. If you've ever done a lyout like this please chime in. Thanks in advance!
2 Replies
There are generally 2 ways to do this: 1. cut the shape form the existing element. 2. Add the shape onto the existing element. Unless you need content to be able break out of the element (ie a drop-down that pops up and extends out of the element) my go to for this is usually cut from the existing element with
clip-path. https://bennettfeely.com/clippy/
hopefully at some point we'll get the CSS corner-shape property that will make this super simple.@jsnkuhn Hadn't considered your approach, thanks for the tip! 👍