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
Смотрите видео How to Create Stunning Slanted Containers with CSS онлайн без регистрации, длительностью часов минут секунд в хорошем качестве. Это видео добавил пользователь CSS Weekly 05 Декабрь 2023, не забудьте поделиться им ссылкой с друзьями и знакомыми, на нашем сайте его посмотрели 1,783 раз и оно понравилось 96 людям.