I'm currently working on a freelance project in which i'm using React and i'm having some trouble trying to create some borders for my containers, the first one is this: first_container, i've found a workaround for this one where i create the border using the ::before pseudo-element and then i create two lines with the same color as the background of my page to make it look as if the line is cut at some point, i use this for the borders:
.custom-container::before {
-webkit-mask-composite: xor;
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
background: linear-gradient(180deg, #c2157d 0%, #e8380d 100%);
border-radius: 10px;
content: '';
inset: 0;
mask: initial;
mask-composite: exclude;
opacity: 0.6;
padding: 4px;
position: absolute;
width: 100%;
}
And this for the lines:
.black-line {
background: #10060f;
bottom: 0;
left: 0;
}
.vertical-line {
width: 6px;
}
.horizontal-line {
height: 6px;
}
And then in the HTML, i do this:
<div className="custom-container position-relative">
<div className="black-line horizontal-line w-25 position-absolute"></div>
<div className="black-line vertical-line h-75 position-absolute"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci numquam assumenda sint.</p>
</div>
Is there a way to do this where i don't have to create two separate black lines to hide some parts of the border?
Now the following borders are where i'm really struggling, this is the second one: second_container, in this one i can use the same technique as the previous one, with black lines to hide some parts of the border but then, with the little tail at the top left of the border i don't know what to do, i've tried downloading the entire border as an SVG (the prototype is made in Figma) and then using it as a background-image but it doesn't fit quite right and it doesn't look good on smaller resolutions, if you had to add this little tail how would you do it?
And last but not least, a nightmare for a css noob like me: final_containers, in these two i don't even know where to begin, what would you do in this case?
Thanks for reading, i hope someone in this great community can help me and i hope this can help others too.