KP-C

Kevin Powell - Community•2y ago•

6 replies

Nekorin

Any ideas on how to create a double border chamfer with transparent background?

I remember that Kevin has a good video on creating borders with cut corners here: https://www.youtube.com/watch?v=aW6qEAQSctY

Is there a way to create something similar but has transparent background with just CSS without resorting to SVG?

YouTubeKevin Powell

Create borders with cut corners | fully responsive CSS and easy to ...

I was asked if we could make a button with cut corners, and it seemed like a fun challenge, and this is my solution! It involves a lot of custom properties and the setup is a little complex, but the custom properties make it easy to make changes down the line!

Links
The code: https://codepen.io/kevinpowell/pen/bGLmORx
How to pick units: ...