How to Make a Pointy Arrow with a Div in CSS

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

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>

How to make a right pointed arrow using css

You just needed to swap the left/right values of your border rules to make the arrow face the opposite direction.

Change this:

border-width: 18px 30px 18px 0;
border-color: transparent #fff transparent transparent;

To this:

border-width: 18px 0 18px 30px;
border-color: transparent transparent transparent #fff;

And then to match your example image, I changed the 30px side to also be 18px, forming an equilateral triangle.

.arrow {  position: relative;}.arrow::after {  position: absolute;  content: '';  width: 0;  height: 0;  left: 0;  border-style: solid;  border-width: 18px 0 18px 18px;  border-color: transparent transparent transparent #fff;  bottom: 45px;}

<div class="arrow">  <img style="width:70%" src="https://i.imgsafe.org/a842cd10d7.png" class="img-responsive"></div>

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 slanted CSS arrow pointing to a div

Fiddle with canvas
I overlayed a canvas between the links and the images, and there's a function that calculates the coordinates of the link and the image, and draws an arrow in between them when you click on it.

$(document).on('click','a',function(){
var c = document.getElementById("arrows");
var ctx = c.getContext("2d");
var start = arrowcoords(this);
var end = arrowcoords(document.getElementById($(this).html()));
canvas_arrow(ctx,start.left,start.top,end.left,end.top);
});

With arrowcoords being based on jqueries position and width/height

function arrowcoords(el){
   var position = $(el).position();
   position.left+=$(el).width()/2;
   position.top+=$(el).height()/2;
   return position;
}

And the arrow taken from Stack overflow about drawing arrow on canvas

How to make an arrow pointing down after a section in HTML/CSS

I just did the thing with margins and I attached it to the bottom with bottom: 0

.down-btn  {
bottom: 0;
position: absolute;
min-width: 30px;
margin: 0px calc(50vw - 15px);
}

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