How to Create Stunning Slanted Containers with CSS
A detailed, in-depth guide to creating slanted card components using CSS clip-path & shape-outside properties.
⚠️ Please note:
At the time of recording, I didn’t realize the `shape-margin` property exists, which lets you effortlessly add margin to `shape-outside` — use this instead of tweaking the path points.
I’m using some physical properties like `width` and `height` in code — these should have been logical properties like, `inline-size`, and `block-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.
🔗 Links
CodePen Demo: https://codepen.io/ZoranJambor/pen/Yz...
Mastering Linting: https://masteringlinting.com
CSS Stickers: https://stickers.css-weekly.com/
In-Depth Guide to CSS Logical Properties: • In-Depth Guide to CSS Logical Properties
clip-path on MDN: https://developer.mozilla.org/en-US/d...
shape-outside on MDN:
Subscribe to CSS Weekly Newsletter:
💌 https://css-weekly.com/
📖 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
Course Mastering Prettier & Stylelint
🔥 Learn everything about the best linting tools while supporting CSS Weekly: https://masteringlinting.com/
🏷️ Use coupon code YOUTUBE25 to get an additional 25% off on the already discounted pre-launch price.
Get CSS-themed stickers:
🪧 https://stickers.css-weekly.com/
Keep up-to-date with CSS Weekly:
🐦 Twitter: / @cssweekly
🎶 TikTok: / cssweekly
🎇 Instagram: / cssweekly
📘 Facebook: / cssweekly
Keep up to date with what I'm up to:
👨💼 Blog: https://zoranjambor.com
💼 LinkedIn: / zoranjambor
Zoran Jambor
#css #csstutorials
Watch video How to Create Stunning Slanted Containers with CSS online without registration, duration hours minute second in high quality. This video was added by user CSS Weekly 05 December 2023, don't forget to share it with your friends and acquaintances, it has been viewed on our site 1,783 once and liked it 96 people.