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

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>

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