What'd be the best way to recreate this?

No description
14 Replies
ἔρως
ἔρως2mo ago
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
lko
lkoOP2mo ago
This was my "solution" so far https://codepen.io/Lko3001/pen/bNVEVEo
Lko
CodePen
Untitled
...
lko
lkoOP2mo ago
But for some reason, I didnt think about grid, and it might actually be the best solution I believe
ἔρως
ἔρως2mo ago
i don't know, your background solution is almost there
lko
lkoOP2mo ago
and yeah, i was thinking about corner shape as well, but it has no support sadly
ἔρως
ἔρως2mo ago
not yet
lko
lkoOP2mo ago
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
grid-template-columns: var(--offset) 1fr var(--offset);
grid-template-r: var(--offset) 1fr var(--offset);
grid-template-columns: var(--offset) 1fr var(--offset);
grid-template-r: var(--offset) 1fr var(--offset);
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
ἔρως
ἔρως2mo ago
you know what you can do? you can use a clip-path for your solutions for the pseudo-elements
13eck
13eck2mo ago
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.
ἔρως
ἔρως2mo ago
that could work
13eck
13eck2mo ago
Turn the image into a 9-slice rect and it becomes a border
lko
lkoOP2mo ago
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
ἔρως
ἔρως2mo ago
try beck's solution since you're using gradients, and gradients are allowed, it should work
lko
lkoOP2mo ago
Thank you

Did you find this page helpful?