Create CSS Arrows

css-arrow

There are two ways to have arrows in your site, first you can use image as arrow or css to create the one.

I personally recommend you to use css because it take less time to load in compare to image.

Please check the html and css code below to create arrow with the help of css.

The actual width and height of the arrow is determined by the width of the border.

<div class=”arrow”></div>

.arrow{
margin:auto;
width: 0;
height: 0;
border-left: 90px solid transparent;
border-right:90px solid transparent;
border-top: 90px solid #000;
}

click on the link to see the live demo.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>