How to Create a Round Arrow with Only HTML and CSS

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

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>

draw circle around the arrow using pure css

If I understand you, something like this:

.button span:before {
    content:' ';
    position: absolute;
    top: 0px;
    right: -18px;
    opacity: 0;
    width: 30px;
    height: 30px;
    margin-top: -19px;
    border-radius: 50%;
    background: #000;
    transition: opacity 0.2s, top 0.2s, right 0.2s;
}

Demo: http://jsfiddle.net/DFNn9/4/

Create an arrow inside circled div using css

Using the :before pseudo element:

• Change the <input> to <button> to allow child elements.

• The button is set as position: relative and the position: absolute pseudo element will position itself in relation to it

• The arrow is created from the top, left and bottom border. The transparent borders create a triangle shape

The pseudo :before element behaves the same as this:

<button>
    <div>I am :before</div>
</button>

CSS / HTML / Demo

.circle {  width: 15%;  height: 0;  padding-bottom: 15%;  -moz-border-radius: 50%;  -webkit-border-radius: 50%;  border-radius: 50%;  background: #ccc;  position: relative;  border: none;}.circle:before {  content: '';  display: block;  border-top: solid 10px transparent;  border-left: solid 10px #FFF;  border-bottom: solid 10px transparent;  position: absolute;  top: 50%;  left: 50%;  margin: -10px 0 0 -3px;}

<button type="submit" class="circle" value=""></button>

Style a link to be a circle with an arrow inside

You can get rid of the wrapping div (and the prefixed border-radius too), and use pseudo-elements instead with an arrow character in the content CSS property.

Result

or using \25b2 (and 50px font-size):

HTML

<a href="#"></a>

CSS

a {
    background: #4679BD;
    text-decoration:none; /* Remove that ugly underlining */
    border-radius: 50%;
    display: block;
    height: 80px;
    width: 80px;
}
a::after {
    content:"\2191";   /* The code for the arrow : see the reference */
    display: block;
    color: white;
    font-weight: bold;
    font-size: 60px; /* Adjust for your needs */
    text-align: center;
}

Demo

Bonus

A list of useful HTML and CSS entities!

Responsive? Using sizes relative to the font size (like em, rem...) instead of px, yes.

Responsive to the screen size itself? No, AFAIK.

How do I create circle div with arrow show to the next circle

Here's a simple way you can create arrows with CSS using only pseudo elements. In the code below I have created a class .arrow that holds all the arrow's parts (body and head). Using :before and :after you can create both body and head. Then you can use some border-radius rules to style the tip of your body (right side, the one touching the head of the arrow).

.arrow {  width: 100px;  height: 10px;  position: relative;}
.arrow:before {    content: " ";    width: 114px;    height: 5px;    background-color: black;    display: inline-block;    top: 4px;    position: absolute;    border-top-right-radius: 30%;    border-bottom-right-radius: 30%;}
.arrow:after {    content: " ";    display: inline-block;    font-style: normal;    position: absolute;    width: 0.6em;    height: 0.6em;    border-right: 0.2em solid black;    border-top: 0.2em solid black;    transform: rotate(45deg);    margin-left: 100px;}

<div class="arrow"></div>

Rounded arrows with CSS

Yes, it is possible! You rotate the box, give it a border-radius and use a 45deg linear-gradient as a background.

DEMO

HTML:

<div class='arrow'></div>

CSS:

.arrow {
    width: 7em;
    height: 7em;
    border-radius: 0 0 2em 0;
    margin: 5em;
    transform: rotate(45deg);
    background: linear-gradient(-45deg, black 50%, transparent 50%);

}

If you want the angle of the arrow to be different, then you can also skew it.

Take into account the fact that CSS gradients are not supported by IE9 (I am not saying "or older" this time because you mention CSS3 among your tags). The solution in that case would be to use a solid background and to somehow make sure the upper part won't show, either by covering it with a preceding element, or by clipping it (see the answer Tim Medora provided).

Also, at this point there is still no support for the unprefixed syntax (although this will soon change :D ), so you will need to either manually add the prefixes -webkit-, -moz-, and -o-. (I did not add them in the demo because Dabblet uses -prefix-free which takes care of doing this.)

How to make a box with arrow in CSS?

Like this :

.arrow {
    border: solid 10px transparent;
    border-right-color: #FFF;
}

Demo : http://jsfiddle.net/sparkup/edjdxjf2/

UPDATE :

It can also be achieved without empty elements with the css property :before

element:before {
    content: "";
    position: absolute;
    top: 50%;                         // half way down (vertical center).
    margin-top: -15px;                // adjust position, arrow has a height of 30px. 
    left:-30px;
    border: solid 15px transparent;
    border-right-color: #FFF;
    z-index: 1;
}

Demo : http://jsfiddle.net/sparkup/y89f1te0/

hope it helps

How to Make A Chevron Arrow Using CSS?

You can use the before or after pseudo-element and apply some CSS to it. There are various ways. You can add both before and after, and rotate and position each of them to form one of the bars. An easier solution is adding two borders to just the before element and rotate it using transform: rotate.

Scroll down for a different solution that uses an actual element instead of the pseuso elements

In this case, I've added the arrows as bullets in a list and used em sizes to make them size properly with the font of the list.

ul {    list-style: none;}
ul.big {    list-style: none;    font-size: 300%}
li::before {    position: relative;    /* top: 3pt; Uncomment this to lower the icons as requested in comments*/    content: "";    display: inline-block;    /* By using an em scale, the arrows will size with the font */    width: 0.4em;    height: 0.4em;    border-right: 0.2em solid black;    border-top: 0.2em solid black;    transform: rotate(45deg);    margin-right: 0.5em;}
/* Change color */li:hover {  color: red; /* For the text */}li:hover::before {  border-color: red; /* For the arrow (which is a border) */}

<ul>    <li>Item1</li>    <li>Item2</li>    <li>Item3</li>    <li>Item4</li></ul>
<ul class="big">    <li>Item1</li>    <li>Item2</li>    <li>Item3</li>    <li>Item4</li></ul>

---

Related Topics