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?
7 Replies
How about adding your design file or code?
--> What inside circle shape is it?
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@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.
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 fillI'll look into it, thanks for the advice.
something like one of these: https://codepen.io/jsnkuhn/pen/eYMQmoe
https://codepen.io/chooking/pen/mdYrjqw
This is not perfect, but it gets you close.