How to create this weird shape in CSS?

Some similar example would be great too. I can't google it cuz I dont know what's called.

11 Replies

Unknown User•2y ago

Message Not Public

there's an old CSS spec, that isn't implemented yet, that reefers to this as corner-shape. It's kind of like a version 2 of border-radius that would allow round and angled (and possibly scoped and notched) corners. For now i'd probably do a border-radius for the round corners and a mask for the angles. here's a csswg thread I made to help resurrect the work on corner-shape with a bunch of similar examples on current pages and how they are currently done: https://github.com/w3c/csswg-drafts/issues/6980

Chris Bolson•2y ago

I would use a clip-path. Something like this would do the trick:

  clip-path: polygon(
    15% 0, 
    100% 0, 
    100% 85%, 
    85% 100%, 
    0 100%, 
    0 15%)

  clip-path: polygon(
    15% 0, 
    100% 0, 
    100% 85%, 
    85% 100%, 
    0 100%, 
    0 15%)

you can of course adjust the values to suit, you would probably be better off with fixed unit values in this case. The one you need to adjust are the 15% and 85%, no need to change the others.

Khoa•2y ago

I notice the clip-path would erase my solid borders too

Khoa•2y ago

is there a way to avoid this?

Chris Bolson•2y ago

Which borders? I think something went wrong with your attachment (at least I can’t see anything)

capt_uhu•2y ago

yep clip-path is going to cut off borders. You're image example above didn't have any borders. Things get harder if you want borders. What is it that you are trying to make exactly?

CodeNascher•2y ago

kevin once made smth. similar. maybe you can use that as a base? https://youtu.be/aW6qEAQSctY

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: ...

Chris Bolson•2y ago

I don't think that I have seen that particular video - I'll watch it later.... In the mean time I could resist putting a quick hack together using clip-path and linear-gradient just to see if I could fake the corner borders:
https://codepen.io/cbolson/pen/PoymyjJ?editors=0100 Some magic numbers in there and also not responsive so not really a valid solution 😆 That's a great solution - basically a clip-path within a clip-path by using a pseudo element.

CodeNascher•2y ago

yeah. immediately had this video in mind when i saw your pic in the op.

Chris Bolson•2y ago

Here is my take based on Kevins' video using the pseudo element.
I have done is slightly differently by "just" reducing the pseudo element dimensions and adjusting the clip path using calculations. https://codepen.io/cbolson/pen/wvYdQaQ?editors=0100

Gaming

Programming

How to create this weird shape in CSS?