HTML/CSS Create Div with Arrow Bottom

Question

I'm trying to create the following object as a DIV in HTML/CSS.

enter image description here

I've created the following jsfiddle to test with: http://jsfiddle.net/fz4f4xjv/2/

below is code I have but I'm not sure how to create the arrow on the bottom:

<div id="menuSelected"></div>
#menuSelected {
    width: 250px;
    height: 35px;
    background-color: #368EC5;
}

thankyou :)

I am pretty sure there are many similar questions under the CSS-Shapes tag mate. — Harry, Feb 12 '15 at 08:46
this question should help too http://stackoverflow.com/questions/19719048/center-triangle-at-bottom-of-div — web-tiki, Feb 12 '15 at 08:50
you can create a :after tag and style a tringle there. fe #menuSelected { width: 250px; height: 35px; background-color: #368EC5; position: relative; margin: 0 auto; } #menuSelected:after, #menuSelected::after { position: absolute; top: 100%; left: 50%; margin-left: -40%; content: ''; width: 0; height: 0; border-top: solid 10px #368EC5; border-left: solid 10px transparent; border-right: solid 10px transparent; } — Ivan Sander de Jong, Feb 12 '15 at 08:52

score 4 · Accepted Answer · answered Feb 12 '15 at 08:50

Add a span with the absolute position to that div.

<div class="menuSelected"><span></span></div>

#menuSelected {
    position: relative;
    width: 250px;
    height: 35px;
    background-color: #368EC5;
}
span {
    border-top: 10px solid #368EC5;
    border-right: 10px solid transparent;
    border-left: 10px solid transparent;
    position: absolute;
    bottom: -10px;
    left: 20px;
}

See updated fiddle.

HTML/CSS Create Div with Arrow Bottom

1 Answers1