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
16 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 🙂