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


Tags: javascript,jquery,css,html

Problem :

How can I make a pointy arrow in CSS? Not just a triangle but one with a stem, like a traditional arrow that would be fired from a bow?

I'm trying to do it by creating a div container, containing two containers, left and right. The right will contain the triangle, and the left will contain three divs, the centre of which will be colored to create the stem.

Here's my code:

HTML:

<div id="main">
    <div class='arrowblock'>
        <div class='arrowright'></div>
        <div class='rectcontainer'>
            <div class='rect'></div>
            <div class='rect' style='background-color:green'>
            </div><div class='rect'>
            </div>
</div>

CSS:

.rectcontainer {
    height:30px;
    width:100px;
}

.arrowblock {
    width:130px;
    border-top: 15px solid transparent;
}
.arrowright {
float:right;
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
    border-left: 30px solid green;
}
.rect {
    width:100px;
    height:10px;
    background-color:transparent;
}

Is there a simpler way to achieve this?



Solution :

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

HTML

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

CSS

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

    CSS Howto..

    How do I fill up the remainder of a div with another div?

    How do I center HTML objects on an MVC 4.0 Web API using Razor application?

    How can I create a borderless textbox in Google Chrome using CSS?

    Bootstrap - how to clear css from element to start over?

    How to remove excess space added with \n

    How to switch images on click in html and css

    How to create multiple spoiler buttons

    CSS styles “leaking” to non-intended elements, why does it happen and how to prevent it?

    How to style table as responsive using Jquery mobile?

    How do you load the css for a Mediawiki tag extension?

    How to modify CSS when requirements change?

    How to align form using css [closed]

    How to prevent mobile keyboard from rising footer over the text fields?

    How to make images stay on one long line?

    How to shorten this placeholder-transitioning CSS selector using sass/compass?

    CSS - How to remove unwanted margin between elements?

    How to dynamically add more width inside a div?

    How to remove an invisible space between div tags

    How to avoid css transformation(rotate) when removing class?

    How to Create Grid/Tile View with CSS?

    How to add “android_asset/www/” to the image's path in the CSS only if app is running in Android?

    How to position a set in Raphael SVG?

    How do I properly add a scrollbar to a jQuery Mobile popup using iScrollview?

    CSS question. How can I get blueprint css to work rails tabnav widget?

    How to move the second child in my nav menu with CSS

    How do I reduce the vertical space between list items in an unordered list?

    Google chart - how to change a css property for the whole table

    How to let 3 div columns extend the height until hit the bottom of the page?

    How to make a webpage mobile friendly with css media queries

    How to theme Options of select box