How to Create Stunning Slanted Containers with CSS
A detailed, in-depth guide to creating slanted card components.
A detailed, in-depth guide to creating slanted card components using CSS clip-path & shape-outside properties.
Notes
- At the time of recording, I didn’t realize the
shape-marginproperty exists, which lets you effortlessly add margin toshape-outside— use this instead of tweaking the path points. - I’m using some physical properties like
widthandheightin code — these should have been logical properties like,inline-size, andblock-size— it's fixed in the demo. - Lastly, I’ve recorded the video with a throat infection, and my voice gets progressively worse as the video advances—sorry about this.
Chapters
- 00:00 Intro & demo setup
- 01:56 Create a slanted edge using clip-path
- 04:47 Adjust content to follow the slanted edge using shape-outside
- 09:14 Refactor physical to logical CSS properties
- 10:44 Set shape-outside points
- 13:55 Fix reversed up clip-path points
- 15:01 Tweak margins between cards
- 15:48 Add padding between slanted edge and content using clip-path
- 18:49 Add padding between slanted edge and content using shape-outside
- 20:54 Drawback of this technique and conclusion
