How to Create a Slanted Edge Effect With Simple CSS Tricks

Someone in the Bricks group asked how to create this slanted edge effect. Since it's not super intuitive, I decided to make a tutorial and include a bunch of little pro nuggets as well for better maintainability and scalability.

Enjoy!

*** MY TOOLS ***

*** INNER CIRCLE ***

Step your design/dev game up, make more money, and get the full scoop on scaling your digital agency! When it comes to the Inner Circle, I don't hold back.

⭕ In-depth design & dev trainings
⭕ Business, sales, & marketing trainings
⭕ Agency resources & downloadables
⭕ Vibrant, quality community with zero toxicity
⭕ ...and much more!

*** SOCIAL ***

*** CHAPTERS ***

[odinaka_joshua]

3 trainings in one day, Kevin is BACK! 🔥

[MJSWP]

First time watching your tutorials, Kevin. Great stuff, brother. Keep going 💪

[chrisgreen]

Just brilliant Kevin. Really appreciate you doing these classes

[bluetheredpanda]

Thanks for the great video as always, Kevin! Especially loved the pacing on that one -- not too fast, not too slow, just the right tempo.

[bartderuyck]

Fantastic stuff: so much information in 20 minutes. Thanks!

[jolmstead]

Great solution for more intricate clip-paths and border designs! I've used this for a "ribbon" effect previously.

This "corner cut" can be solved a bit easier using a normal border on the card, a clip-path, and a pseudo-element line rotated to the corner. This also removes the "limitations" you mentioned, so you can use a gradient or background image on the parent section.

I made a simple CodePen showing the results (posted on the original Bricks question).

[kickinapps]

Love this video Kevin - very helpful. I vote for more videos like these! Easy to search and digest to add skills for us. Thanks for all the awesome content. PS> ACSS and Frames owner - very helpful tools and they just keep getting better with age and updates.

[deafdogdesign]

Awesome. Can you please do a follow-up > What if I use border-radius on the card > how to achieve same border-radius on the corners of the slant?🙏🙏🙏

[justinsideris]

The turn around on this was staggeringly impressive, with so many nugs. Bonus nugget for me is making sure I put more thought into answers I give to people. :P

[LupusDesign]

Brilliant! Welcome back, Kevin! I missed you!

[davidwalls]

Great explanation. I can always count on you to make complex topics easy to understand.

[osvaldoodon]

Great practical use of pseudo-elements and clip-path. ¿How should I do to add another element to have another shape in the opposite corner of the edge to include a number or an icon inside. Specially the issues regarding negative margin?

[eucalyptech]

Nice effect, thank you Kevin for these CSS tricks 👍

[davidnickson]

Chef's Kiss for sure on this one! 😘

[emadhosen]

Peace! Awesome... Thank you very much Kevin.

[brendanoconnell]

a classic geary css firestorm of gold nugs. thanks for sharing

[dahunsi]

Quod Erat Demonstrandum! Outstanding and broken down into bite size chunks. Quite technical, but easy to understand. What's next?

[haroonqraja]

How about just using border and adding an SVG shape positioned at the top-right that covers the undesired parts of the border and adds the desired slanting border?

[YasienSarlie]

This is appreciated. Thanks. You a star

[jamorahcito]

tokenized sashimi. you are indeed bonkers nutz. however, completely logical. in 1997, this is the way we did borders. there was no css. there were no borders. we had tables. we had backgrounds. crazy good knowledge here. back to the basics. pay attention folks, this man knows what is up.