Cоздать круглую стрелку с использованием только HTML и CSS?

Я пытаюсь создать круглую стрелку направления с CSS и HTML. Ниже приведены мои попытки.
Attempt 1
В этом коде я повернул div и стрелку, но они находятся в разных позициях.
#curves div { width: 100px; height: 100px; border: 5px solid #999; } #curves.width div { border-color: transparent transparent transparent #999; } #curve1 { -moz-border-radius: 50px 0 0 50px; border-radius: 50px 0 0 50px; } .arrow-right { width: 0; height: 0; border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-left: 27px solid #ccc; float: right; margin-top: -7px; margin-right: -26px; }

Attempt 2
В этом примере стрелка, которую я создал,- прямая.
.container { width: 60%; height: 9px; background: #ccc; margin: 100px auto; -moz-border-radius: 50px 0 0 50px; border-radius: 50px 0 0 50px; } .arrow-right { width: 0; height: 0; border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-left: 27px solid #ccc; float: right; margin-top: -7px; margin-right: -26px; }

Update Я хочу получить, что-то вроде этого.

Перевод вопроса: How can I create a round arrow with only HTML and CSS? @MKD

Ответ

Может быть это не красивое решение но рабочее
* { margin: 0; } div { width: 100px; height: 100px; border-width: 10px; border-color: transparent transparent #000 #000; border-style: solid; border-radius: 100px; position: relative; margin: 20px; } div:after { content: ""; border: 20px solid transparent; border-bottom: 20px solid #000; position: absolute; transform: rotate(45deg); top: -20px; right: 58px; } div:hover { transform: rotate(3600deg); transition: all 12s linear; }