I need your help.

Question

Good day. I drew something like a triangle from the css border, and I want to circle this triangle with a black line 2 pixels along the outer edge. How can I do it?
https://code.sololearn.com/W2NjzjKBGQkC/?ref=app

Answer 1

you can male child inner triangle lile
.triangle-left { width: 0; height: 0; border-top: 23px solid transparent; border-bottom: 23px solid transparent; border-right: 23px solid red; } .inner-triangle { position: relative; top: -20px; left: 2px; width: 0; height: 0; border-top: 20px solid transparent; border-bottom: 20px solid transparent; border-right: 20px solid blue; }

<div class="triangle-left"> <div class="inner-triangle"></div> </div>

Answer 2

Use pseudo-element to achieve it.
Check out the code

https://code.sololearn.com/W103S0E6Nvls/?ref=app

Answer 3

Thanks for answers. I checked your answers, and they all work. And it helped me. But I had another question. Which of these solutions is effective for use in a group operation? I want the elements created once to move and transform easily, but not without destroying its internal structure.

Answer 4

Алмат Айтбаев just try out with some transforms, i think my code should work with any css transform.

Answer 5

OK. I understood you