CSS - obramowanie zdjęcia do połowy

Question

Hej, potrzebuję dodać obramowanie do zdjęcia (zdjęcie ma border-radius: 100px) ramka szerokości 5px tyle że ma być na 50%. Tzn ma zajmować ćwiartkę ramki. Albo inaczej, ramka ma być czerwona a ćwiartka jej zielona. Da się coś takiego zrobić?

Comments

Możesz pokazać przykładowy obrazek tego, jak to ma wyglądać?

---

tak mniej więcej :D 

tak jak widać ramka nie jest zielona w prawej górnej ćwiartce

Answer 1

się zrobić tak, aby ten zielony fragment był procentowy? Tzn np 90% tego czerwonego itd?

Propozycja w <svg> <circle> ze zdjęciem <img> po środku.  

Answer 2

Może tak dla diva/obrazka:

border-radius: 50%; /* okrągłe obramowanie */
border: 5px solid red; /*czerwona ramka szerokości 5 pikseli */
border-top: 5px solid green; /*zielona ramka od góry szerokości 5 pikseli */
transform: rotate(45deg); /* przekręcasz o 45 stopni */

 

Comments

wygląda dobrze, a dałoby się zrobić tak, aby ten zielony fragment był procentowy? Tzn np 90% tego czerwonego itd?