Creative Borders Help

I need some help in creating a very creative sale tag. I have tried multiple options, but none of them have worked so far. This inside-circle shape has caused me a big headache and I don't have a good idea on how to fix it. The biggest problem is that the background is an image, and this tag is used in multiple places. Couple somebody please nudge me in the right direction?
No description
7 Replies
reddogg476
reddogg476β€’7mo ago
How about adding your design file or code? --> What inside circle shape is it?
capt_uhu
capt_uhuβ€’6mo ago
in theory I'd cover the inside corners with round black background pseudo elements with border-style: dotted; and background-clip: padding-box; to put the dots on the outside of the black pseudos. Honestly it's probably not going to look very good though cuz CSS border styles other than solid are kinda poo. Only other though is an SVG border-image. @sava
sava
savaOPβ€’6mo ago
@reddogg476 @jsnkuhn Thank you both. I talked it over with the designer, we decided to go against it. There is no way to do it essentially from what I've gathered and researched, either because of the border, or the image in the background, or the .3 opacity on the background of the tag. It would have to be stitched using SVGs, and then creating multille versions based on the width of the tags. Which can be done using JavaScript, but it's not very good.
capt_uhu
capt_uhuβ€’6mo ago
hard to know for sure but when you say "stitched" that makes me think of border-image-slice which cuts the source image up into 9 pieces. 4 corners, 4 edges and a center fill
sava
savaOPβ€’6mo ago
I'll look into it, thanks for the advice.
Chooβ™šπ•‚π•šπ•Ÿπ•˜
https://codepen.io/chooking/pen/mdYrjqw This is not perfect, but it gets you close.
Want results from more Discord servers?
Add your server