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

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?

Answer 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>

Answer 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>

Answer 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>

Answer 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.