How can I make a pointy arrow with a div in CSS

Here is an arrow with pure CSS. Supported by all browsers. It took me less than a minute to make..

enter image description here

jsFiddle

.arrow {
  width: 120px;
}

.line {
  margin-top: 14px;
  width: 90px;
  background: blue;
  height: 10px;
  float: left;
}

.point {
  width: 0;
  height: 0;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
  border-left: 30px solid blue;
  float: right;
}
<div class="arrow">
  <div class="line"></div>
  <div class="point"></div>
</div>

To build on @josh-crozier's answer, you can eliminate a lot of the HTML by using pseudo-elements instead:

jsFiddle

HTML:

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

CSS:

.arrow {
    position:relative;
    width:120px;
    margin:50px auto;
    height:0;
    border-bottom:10px solid blue;
}

.arrow::after { 
    content: '';
    width: 0; 
    height: 0; 
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
    border-left: 30px solid blue;
    position: absolute;
    right: -10px;
    top: -15px;
}

To add an arrow at the start of the line using the ::before element is trivial also: jsFiddle


I've created this, which you can use for an arrow that points to the right.

In the script are two variables, widthofarrow and colorofarrow. By changing these you can create an arrow of any size or color.

http://jsfiddle.net/FKekh/3/

HTML:

<!DOCTYPE html>
<div id="main"></div>

CSS:

.rectcontainer {
    height:30px;
}

.arrowblock {

}
.arrowright {
float:right;
    }
.rect {
    width:100px;
    height:10px;
    background-color:transparent;
}

JAVASCRIPT:

widthofarrow=130;
colorofarrow="#345678";

$("#main").append("<div class='arrowblock'><div class='arrowright'></div><div class='rectcontainer'><div class='rect'></div><div class='rect' style='background-color:" + colorofarrow + "'></div><div class='rect'></div></div></div>");


$('.arrowblock').css('width', widthofarrow + 'px');
$('.rectcontainer').css('width', (widthofarrow - (30)) + 'px');    
$('.arrowright').css('border-top', (15) + 'px solid transparent');
$('.arrowright').css('border-bottom', (15) + 'px solid transparent');
$('.arrowright').css('border-left', (widthofarrow/4.333333333333333) + 'px solid ' + colorofarrow);

EDIT

I've updated JoshC's great code so it can be used to create arrows of different sizes and colors.

http://jsfiddle.net/fqcFp/2/


How about just using a html entity or unicode symbol for your arrow:

<div>&#8594;</div>

<div title="U+21A3: RIGHTWARDS ARROW WITH TAIL">↣</div>

div{
    font-size: 40px;
}

FIDDLE

There are more to choose from here

Tags:

Javascript

Html

Css

Jquery

Recent Posts