What's the best way to style 45 bevel corners?
Tried a few ways, but they mostly seem like hacks.
Solution should achieve the following results:
- consistent border width, even along angled corner
- require only one div/class (no inner+outer containers)
- use either the outline or border attribute
- allow for css transitions or animations or keyframes etc. some solutions use the background-image attribute, which restricts basic animations.
- fixed or responsive corner dimensions
31 Replies
unfortunately the mythical answer we all seek for this just doesn't exist yet. Right now it's spec-ed as
corner-shape but is not ready to be implemented in browsers: https://drafts.csswg.org/css-borders-4/#corner-shapingThis sounds like a homework assignment. And a dumb one at that. They want you to ::checks notes:: do the impossible…
you can make this with an svg image as the background, and then use a clip-path to keep things inside
however, clipping cuts the content off, and doesnt re-layout the stuff inside
well, you could also use shape-outside to prevent the content being clipped.
I wouldn't say it is impossible, But yea, this is a real hassle, not really something easy to do with the given constraints
and the hardest requirement is to only use a single element for this
hardest and most nonsense
why the heck would you limit yourself to BS like that, other than as an exercise, in which case "best" doesn't matter?
You can do it 😄
https://codepen.io/kevinpowell/pen/rNrwVjV
Kevin
CodePen
Responsive/Adaptive cut corners
A cut-corner border effect using pseudo-elements. Updating the custom properties lets you change the border (gradient or solid color), background color...
I did two edges here, but you could take the same approach for one.
Dangit, Kevin! Why you gotta show us up like that!?
But, but Kevin. There's JavaScript in that pen! 😱
i didn't use an outline or border though...
that's just so you can adapt it with the sliders 😛
The King has failed the test lol
If it is an assignment of some sort, I'd really like to know what the solution is, using a border or outline 😅
unless it's a border-image, but then I can't imagine the corner dimensions would be adaptable/resposive
i remember that video
but what happens if the content touches the sides?
Should be fine, the "border" is "inside" the element.
Or do you mean the content inside the element, like if the text is longer? if that's what you mean, it's using padding, so it gets bigger/smaller with the text
yeah, but if you dont have the padding, will the text show on top of the pseudo-elements? will it be cut off?
because the assignment seems to be to layout text and stuff around the diagonal, instead of going missing or something
maybe the thingy to shape text around a floating image will work for that?
can you explain what's going on? or how did you get the border effect ?
or if anyone else can explain , that would be appreciated too 🙂
here's the link to the video: https://www.youtube.com/watch?v=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: ...
I came up with my approach but I am bit confused when I provide the same offset of 5px , the
"border" feels not the sameYour clip path is using percentages, and 5% on the x axis will be bigger than 5% on the y axis, because it's wider than it is tall.
It's why I used calcs for everything, making sure to keep it consistent
btw can you make a video on all display properties, esp , "new ones"
would love it
Would love to, but I donno what the new ones are 😆
maybe I am late to the party but I have never heard of
subgrid till last monthGot lots of content on it 😊
https://www.youtube.com/playlist?list=PL4-IK0AVhVjM4Kjqw_zN-Y3neCFXWPDJ2
YouTube
Subgrid
And a lot more on flex and grid as well 🙂
I probably could do a single video looking at everything, but I do have a lot comparing flex and grid
hi , i watched your videos , so subgrid basically inherits grid columns /properties from its parent grid ?
sort of, yes 🙂 . It's different from using
grid-template-columns: inherit, because it uses the actual grid lines, so the children can also impact the layout too.what program do you use to draw the shape you want and have it generate the css polygon cords
This thread is about bevel corners.
You need to create a new post if your question/comments are not related to this thread.
What Chris said and also please don't @ people just because they helped you before
:thumbup:
my bad