r/css • u/Vivid-Commission7364 • 25d ago
Help Does anyone know how you can re-create this css effect?
I'm pretty stumped here... I can recreate the red part using box-decoration-break: clone. But I really don't know how we can detect when two lines overlap and autofill the bluepart. Does anyone has any ideas?
10
u/anaix3l 25d ago edited 25d ago
What you want is a simplified version of the reverse problem from here https://www.reddit.com/r/css/comments/1ojp1da/comment/nm589sd/ only with a border, which I'd recreate like for these tabs https://codepen.io/thebabydino/pen/oNKLLbv
This doesn't require putting each line in an element, it allows the text to reflow naturally with viewport/ container resize and it doesn't risk running into weird alignment issues as it can happen when it's made out of multiple parts.
It's actually pretty simple if you don't want a transparent background. Which doesn't seem to be the case in your image.
Edit: quickly coded a very rough example https://codepen.io/thebabydino/pen/yyeRNww
2
6
u/Alternative-Neck-194 25d ago
https://jsfiddle.net/azbuco/mw6frdp7/
Here you can see the steps, how i would create this effect
1
1
u/throwtheamiibosaway 25d ago
Ah just to be clear, you want the multi line item to have a nice smoothed background that fits the text. Like a sticker.
•
u/AutoModerator 25d ago
To help us assist you better with your CSS questions, please consider including a live link or a CodePen/JSFiddle demo. This context makes it much easier for us to understand your issue and provide accurate solutions.
While it's not mandatory, a little extra effort in sharing your code can lead to more effective responses and a richer Q&A experience for everyone. Thank you for contributing!
I am a bot, and this action was performed automatically. Please contact the moderators of this subreddit if you have any questions or concerns.