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 <div> and an arrow, but both are in different positions.

This is the CSS:

 #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;   }

<div id="curves" class="width">    <div id="curve1"></div><span class="arrow-right"></span>  </div>

Attempt 2

In this the arrow I have created is straight.

.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;  }

<div class="container">    </span><span class="arrow-right"></span>  </div>

Update I want it something like this

Answer 1

You could use a pseudo element to generate the triangle (using the famous border hack).

After that, you would be able to use a thick border on the actual element (with a border-radius of 50% to make it a circle). This allows you to rotate the arrow to your liking.

div {    border: 20px solid transparent;    border-top-color: black;    border-left-color: black;    height: 100px;    width: 100px;    border-radius: 50%;    position: relative;    -webkit-transform: rotate(-45deg);    -ms-transform: rotate(-45deg);    transform: rotate(-45deg);    margin:30px auto;  }  div:before {    content: "";    position: absolute;    top: -20px;    left: 80%;    height: 0;    width: 0;    border-left: 30px solid black;    border-top: 30px solid transparent;    border-bottom: 30px solid transparent;    -webkit-transform: rotate(45deg);    -ms-transform: rotate(45deg);    transform: rotate(45deg);  }      /*BELOW IS FOR DEMO ONLY*/    div:hover {    -webkit-transform: rotate(315deg);    -ms-transform: rotate(315deg);    transform: rotate(315deg);    transition: all 0.8s;  }  html {    text-align:center;    color:white;    font-size:30px;    height: 100%;    background: rgb(79, 79, 79);    /* Old browsers */    background: -moz-radial-gradient(center, ellipse cover, rgba(79, 79, 79, 1) 0%, rgba(34, 34, 34, 1) 100%);    /* FF3.6+ */    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(79, 79, 79, 1)), color-stop(100%, rgba(34, 34, 34, 1)));    /* Chrome,Safari4+ */    background: -webkit-radial-gradient(center, ellipse cover, rgba(79, 79, 79, 1) 0%, rgba(34, 34, 34, 1) 100%);    /* Chrome10+,Safari5.1+ */    background: -o-radial-gradient(center, ellipse cover, rgba(79, 79, 79, 1) 0%, rgba(34, 34, 34, 1) 100%);    /* Opera 12+ */    background: -ms-radial-gradient(center, ellipse cover, rgba(79, 79, 79, 1) 0%, rgba(34, 34, 34, 1) 100%);    /* IE10+ */    background: radial-gradient(ellipse at center, rgba(79, 79, 79, 1) 0%, rgba(34, 34, 34, 1) 100%);    /* W3C */    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#4f4f4f', endColorstr='#222222', GradientType=1);    /* IE6-9 fallback on horizontal gradient */  }

HOVER ME  <div></div>

---

If you then wanted to lengthen the arrow, you could make the bottom border visible. For example;

div {    border: 20px solid transparent;    border-top-color: black;    border-left-color: black;    border-bottom-color: black;    height: 100px;    width: 100px;    border-radius: 50%;    position: relative;    transform: rotate(-45deg);    margin:30px auto;  }  div:before {    content: "";    position: absolute;    top: -20px;    left: 80%;    height: 0;    width: 0;    border-left: 30px solid black;    border-top: 30px solid transparent;    border-bottom: 30px solid transparent;    transform: rotate(45deg);  }      /*BELOW IS FOR DEMO ONLY*/    div:hover {    transform: rotate(315deg);    transition: all 0.8s;  }  html {    text-align:center;    color:white;    font-size:30px;    height: 100%;    background: rgb(79, 79, 79);    /* Old browsers */    background: -moz-radial-gradient(center, ellipse cover, rgba(79, 79, 79, 1) 0%, rgba(34, 34, 34, 1) 100%);    /* FF3.6+ */    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(79, 79, 79, 1)), color-stop(100%, rgba(34, 34, 34, 1)));    /* Chrome,Safari4+ */    background: -webkit-radial-gradient(center, ellipse cover, rgba(79, 79, 79, 1) 0%, rgba(34, 34, 34, 1) 100%);    /* Chrome10+,Safari5.1+ */    background: -o-radial-gradient(center, ellipse cover, rgba(79, 79, 79, 1) 0%, rgba(34, 34, 34, 1) 100%);    /* Opera 12+ */    background: -ms-radial-gradient(center, ellipse cover, rgba(79, 79, 79, 1) 0%, rgba(34, 34, 34, 1) 100%);    /* IE10+ */    background: radial-gradient(ellipse at center, rgba(79, 79, 79, 1) 0%, rgba(34, 34, 34, 1) 100%);    /* W3C */    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#4f4f4f', endColorstr='#222222', GradientType=1);    /* IE6-9 fallback on horizontal gradient */  }

HOVER ME  <div></div>

Answer 2

SVG solution

The shape is really simple to create in SVG.

For the svg interested:

<svg width="200px" height="200px" viewbox="0 0 400 400">    <path stroke="#000" stroke-width="50" fill="none"          d="M200 350 A 100 100 0 0 1 200 150             M200 150 200 125 225 150 200 175Z"/>  </svg>

Can i use it?