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
Auf dieser Seite können Sie das Online-Video How to Create Stunning Slanted Containers with CSS mit der Dauer stunde minuten sekunde in guter Qualität ansehen, das der Benutzer CSS Weekly 05 Dezember 2023 hochgeladen hat, den Link mit Freunden und Bekannten teilen, dieses Video wurde auf Youtube bereits 1,783 Mal angesehen und es wurde von 96 den Zuschauern gefallen. Viel Spaß beim Betrachtenden Zuschauern gefallen!
