How can I create a round arrow with only HTML and CSS?

Question

I\'m trying to create a round directional arrow with CSS and HTML. Below are my attempts.

Attempt 1

In this I have rotated the

and

Answer 1

Here's another way to do it using clip-paths instead of messing around with borders.

Demo - http://jsfiddle.net/r8rd0yde/4/

.arrow {
  position: relative;
  padding: 20px;
  width: 100px;
  height: 100px;
}
.circle {
  position: absolute;
  box-sizing: border-box;
  height: 100px;
  width: 100px;
  border: 15px solid #000;
  border-radius: 50%;
  -webkit-clip-path: inset(0 50% 0 0);
  clip-path: inset(0 50% 0 0);
}
.triangle {
  position: absolute;
  width: 35px;
  height: 30px;
  background: #000;
  margin-top: -6px;
  margin-left: 38px;
  -webkit-clip-path: polygon(50% 0, 0% 100%, 100% 100%);
  clip-path: polygon(50% 0, 0% 100%, 100% 100%);
  -moz-transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
}
/* JUST FOR DEMO */

.arrow:hover {
  -webkit-transform: rotate(720deg);
  -ms-transform: rotate(720deg);
  transform: rotate(720deg);
  transition: all 1.2s;
}