9 Replies
Is it static, or does it animate?
something like this with pseudo elements and conic gradients
(you can animate the rotation if nessessary)
https://codepen.io/MarkBoots/pen/JjzYKRw
like is there is another way to but tow borders in the same element or the conic and pseudo is more usefull
but how we can but tow borders in the same element
If they were solid colors you could use two box shadows but since it has to be a gradient use a border , border image, border slice on your element and one of its pseudo elements or could use a parent if it has one
I’m not totally sure where the left border would cut off but if you’re trying to keep it simple you can try what jsnkuhn suggested for the elements border
I would edit the title of this post to include something that a user would search like “element with two borders” or something. #how-to-ask-good-questions
so tried to do the second border with a box-shadow but was a no go. Best i can come up with is 2 pseudos for the borders have a look: https://codepen.io/jsnkuhn/pen/vYPNXBX
We can use (1) border (2) outline property to achieve the desired effect
Wow very lucky one transparent side cuts off in the right spot. Btw, you can use aspect-ratio:1 instead of using a height that’s the same as your width , so you only have to edit your width you make changes . And neither box-shadows nor outlines take up space and can cause questions why your shadow is overlapping another element. Unlike a border they don’t take space.
I thought about
outline as well for the second "border" but it's not possible to control individual sides of outline in the same way you can with border (as in there is no such thing as "outline-color-right")took a look at it again. here a way to do it with only 1 element (no pseudo elements)
https://codepen.io/MarkBoots/pen/rNROZvB