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

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  class="width">
  <div ></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

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

6 Answers
  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>

    2015-05-05 14:48:47
  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?

    2015-05-05 09:44:30
  3. I have created this little thing in CSS, you can look at the code to see how it works.

    Note: this does need a solid background.

    .arrow {
      width: 200px;
      height: 200px;
      border: 6px solid;
      border-radius: 50%;
      position: relative;
    }
    .arrow:before {
      content: "";
      display: block;
      width: 10px;
      height: 50px;
      background: #fff;
      position: absolute;
      bottom: 0;
      top: 0;
      right: -6px;
      margin: auto;
    }
    .arrow:after {
      content: "";
      width: 0;
      height: 0;
      border-left: 20px solid transparent;
      border-right: 20px solid transparent;
      border-top: 20px solid #000;
      position: absolute;
      bottom: 106px;
      right: -20px;
    }
    <div class="arrow"></div>

    2015-05-05 15:49:59
  4. 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;
    }
    <div class="arrow">
      <div class="circle"></div>
      <div class="triangle"></div>
    </div>

    Vishnu M.2015-05-05 10:12:11
  5. You can use the Clockwise open circle arrow (U+21BB) character:

    .arrow {
      display: inline-block;
      font-size: 300px;
      line-height: 200px;
      font-weight: bold;
      transform: rotate(90deg);
    }
    <span class="arrow">↻</span>

    2015-05-05 09:44:11
  6. #curvedarrow {
      position: relative;
      width: 0;
      height: 0;
      border-top: 9px solid transparent;
      border-right: 9px solid red;
      -webkit-transform: rotate(10deg);
      -moz-transform: rotate(10deg);
      -ms-transform: rotate(10deg);
      -o-transform: rotate(10deg);
    }
    #curvedarrow:after {
      content: "";
      position: absolute;
      border: 0 solid transparent;
      border-top: 3px solid red;
      border-radius: 20px 0 0 0;
      top: -12px;
      left: -9px;
      width: 12px;
      height: 12px;
      -webkit-transform: rotate(45deg);
      -moz-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
      -o-transform: rotate(45deg);
    }
    

    I found this in https://css-tricks.com/examples/ShapesOfCSS/

    It may not be the exact shape you want but it's definately a good starting point.

    Steve Stenzel2015-05-06 20:37:29
Related Articles
You Might Also Like