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?
Kevin Powell
YouTube
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: ...
6 Replies
If you can do the cut corners,
double is a valid border-style.The problem there is no way to do cut corners without using clip-path. And clip-path doesn't really give a "border" to work with.
Found this polygon border with CSS Paint API though, but the API is still experimental, not for production.
https://css-tricks.com/exploring-the-css-paint-api-polygon-border/
Temani Afif
CSS-Tricks
Exploring The CSS Paint API: Polygon Border | CSS-Tricks
Nowadays, creating complex shapes is an easy task using clip-path, but adding a border to the shapes is always a pain. There is no robust CSS solution and we
End up using JS code to draw svg on button elements. If only this is doable in pure html/css...
https://codepen.io/nekorin/pen/GRaVjXq
could use a pseudo-element for the borders and clip them in reverse with clip-path?
A CSS solution combining clip-paths and linear-gradients. A complete hack and don't zoom in too closely 😆 but it does work with different content lengths or heights.
https://codepen.io/cbolson/pen/RwmXKYv
Wow this looks so clean. And it works in various widths, without resorting to using resizeObserver to resize the buttons unlike mine.