14 Replies
currently?
1- tables with images on the sides
2- grid with pseudo-elements
next year? you probably can get away with some border-shape shenanigans
This was my "solution" so far
https://codepen.io/Lko3001/pen/bNVEVEo
But for some reason, I didnt think about grid, and it might actually be the best solution I believe
i don't know, your background solution is almost there
and yeah, i was thinking about corner shape as well, but it has no support sadly
not yet
Yeah but since they're pseudo elements outside the div, they might cause problems when doing it responsive, so maybe using grid, you just do something like
And then with some pseudo elements (or maybe even real elements, because there are too many, there's a way to build it
Also there's a probably an even smarter way of doing it with SVG filters but I've never used them
you know what you can do?
you can use a clip-path for your solutions
for the pseudo-elements
MDN Web Docs
border-image - CSS | MDN
The border-image CSS property draws an image around a given element. It replaces the element's regular border.
that could work
Turn the image into a 9-slice rect and it becomes a border
How? I'm using a mask, it's pretty much the same thing, am I missing something? And I dont see how the border image might be userful to me
try beck's solution
since you're using gradients, and gradients are allowed, it should work
Thank you