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

0 votes

Using CSS and HTML, I'm attempting to make a rounded directional arrow. Here are my tries.

I've rotated the div> and an arrow in this, but they're both in different places.

Introducing 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>
Jul 8, 2022 in CSS by Edureka
• 13,620 points
1,029 views

No answer to this question. Be the first to respond.

Your answer

Your name to display (optional):
Privacy: Your email address will only be used for sending these notifications.

Related Questions In CSS

0 votes
1 answer

I want to create a small square colour filled box in HTML & CSS. And most important - I want to write one line after the box

Try using the square html entity: <div style="color:blue">&a ...READ MORE

answered Jun 28, 2022 in CSS by Edureka
• 12,690 points
4,990 views
0 votes
1 answer

How can I set a css border on one side only?

Use four values to add a border ...READ MORE

answered Jun 28, 2022 in CSS by Edureka
• 12,690 points
410 views
0 votes
0 answers

How to make a back-to-top button using CSS and HTML only?

I want to scroll down and up ...READ MORE

Jun 30, 2022 in CSS by Edureka
• 13,620 points
324 views
0 votes
0 answers

How can I vertically center a div element for all browsers using CSS?

I want to center a div vertically with CSS. ...READ MORE

Jun 22, 2022 in CSS by Edureka
• 13,620 points
326 views
0 votes
0 answers

How do I create a 3x3 grid via CSS?

Given 9 divs one after another, I want ...READ MORE

Aug 12, 2022 in CSS by Edureka
• 13,620 points
751 views
0 votes
0 answers

How do I center a list of text and then justify it in a w3.css column?

I am unable to center the contact ...READ MORE

Aug 17, 2022 in CSS by Edureka
• 13,620 points
439 views
0 votes
1 answer

How to build a special polygon (a kite shape) with HTML & CSS only?

I made two divs, one for Arc ...READ MORE

answered May 28, 2022 in CSS by Edureka
• 12,690 points
1,143 views
0 votes
1 answer

html/css hexagon with image inside

The CSS3 clip-path feature is a novel ...READ MORE

answered Jun 10, 2022 in CSS by Edureka
• 12,690 points
1,854 views
0 votes
0 answers

how to draw a rectangle in HTML or CSS?

I am trying to draw a rectangle ...READ MORE

Aug 18, 2022 in CSS by Edureka
• 13,620 points
863 views
0 votes
0 answers

Posted paper css3

I'm attempting to make a posted paper ...READ MORE

Aug 22, 2022 in CSS by Edureka
• 13,620 points
418 views
webinar REGISTER FOR FREE WEBINAR X
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP