If I was coding these by hand, I would use ::before/::after pseudo-elements. With Webstudio I create a box and place it absolutely relative to the parent and then make sure to add aria-hidden=true to it.
For the vintage item, you'll need an svg or image.
For the pink background, you could set widths of higher than 100% on your pseudo-elements and use negative margins. They could be simple boxes with 1px height.
is there any chance you could record a short video of this to cement the understanding of the process? i think a visual of the process would help with the understanding
Add a width to the parent box, preferably using responsive units or within a flex or grid column. a. test with width 500px on the parent box, and auto left/right margins to center. You should be able to see what you need.
The "after" box needs a negative margin on the right/bottom.
I just put an arbitrary size. I wouldn't put a width on something in reality. I would put it within a container and set the image to full width of that. Then I'd possible setup an aspect ratio or object fill on there depending on what the image is.
The purpose of the demo was conceptual, it will have to be adapted for whatever your use-case is.
