Uploaded December 2023 | Updated September 2026, 2 hours ago
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: codepen.io/ZoranJambor/pen/YzBNGgr
Mastering Linting: masteringlinting.com
CSS Stickers: stickers.css-weekly.com
In-Depth Guide to CSS Logical Properties: youtu.be/cV9JhEV4Ll0
clip-path on MDN: developer.mozilla.org/en-US/docs/Web/CSS/clip-path
shape-outside on MDN: developer.mozilla.org/en-US/docs/Web/CSS/shape-outside
Subscribe to CSS Weekly Newsletter:
💌 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: masteringlinting.com
🏷️ Use coupon code YOUTUBE25 to get an additional 25% off on the already discounted pre-launch price.
Get CSS-themed stickers:
🪧 stickers.css-weekly.com
Keep up-to-date with CSS Weekly:
🐦 Twitter: twitter.com/@cssweekly
🎶 TikTok: tiktok.com/@cssweekly
🎇 Instagram: instagram.com/cssweekly
📘 Facebook: facebook.com/CSSWeekly
Keep up to date with what I'm up to:
👨💼 Blog: zoranjambor.com
💼 LinkedIn: linkedin.com/in/zoranjambor
- Zoran Jambor
#css #csstutorials
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: codepen.io/ZoranJambor/pen/YzBNGgr
Mastering Linting: masteringlinting.com
CSS Stickers: stickers.css-weekly.com
In-Depth Guide to CSS Logical Properties: youtu.be/cV9JhEV4Ll0
clip-path on MDN: developer.mozilla.org/en-US/docs/Web/CSS/clip-path
shape-outside on MDN: developer.mozilla.org/en-US/docs/Web/CSS/shape-outside
Subscribe to CSS Weekly Newsletter:
💌 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: masteringlinting.com
🏷️ Use coupon code YOUTUBE25 to get an additional 25% off on the already discounted pre-launch price.
Get CSS-themed stickers:
🪧 stickers.css-weekly.com
Keep up-to-date with CSS Weekly:
🐦 Twitter: twitter.com/@cssweekly
🎶 TikTok: tiktok.com/@cssweekly
🎇 Instagram: instagram.com/cssweekly
📘 Facebook: facebook.com/CSSWeekly
Keep up to date with what I'm up to:
👨💼 Blog: zoranjambor.com
💼 LinkedIn: linkedin.com/in/zoranjambor
- Zoran Jambor
#css #csstutorials
