CSS3 menu shape, style

Question

Can anyone tel me how I would make a shape like this in CSS, with the triangle centered top or bottom like I want it ?

enter image description here

Edit:

With one element.

So it would be a star's top or bottom half plus a rectangle in my mind.. — Harry, Sep 07 '11 at 07:03
that would be ideal yes, As I would like to use it on menu li items — Harry, Sep 07 '11 at 07:05
Because it would be rather easy to do with 2 divs, one with the triangle and one with the rectangle. — Py., Sep 07 '11 at 07:07
I found this http://nicolasgallagher.com/pure-css-speech-bubbles/demo/ — Harry, Sep 07 '11 at 07:08
Ah yeah, it looks like there is only one element, but uses the :after to create an "invisible" second element. — Py., Sep 07 '11 at 07:17

score 2 · Accepted Answer · answered Sep 07 '11 at 07:27

@harry; there are lot of ways to create this type of triangles arrows. I edit @jam fiddle & center the arrows.

CSS:

div
{
    background: #76a7dc;
    padding: 10px;
    display: inline;
    position:relative;
}

div:after
{
    border-color: #76a7dc transparent;
    border-style: solid;
    border-width: 10px 10px 0;
    content: "";
    margin-top: 5px;
    display: block;
    position: absolute;
    width: 0;
    margin-left:-10px;
    left:50%;
    bottom:-9px;
}

check this example http://jsfiddle.net/sandeep/wWykY/2/

how would you do that on a list of li's, each a menu item – Harry Sep 07 '11 at 07:30 — Harry, Sep 07 '11 at 07:30

Bojangles · Answer 2 · 2011-09-07T11:13:03.160

1

There's this JSFiddle, which will do mostly what you want. However, the "pointy bit" will only align to the left. I suggest you take a look at these examples and see if there are any that are similar to what you want.

To center the arrow underneath the box, give it a left: 15px property, providing the box's width is 50px. This will center the arrow, but the only issue is that you will have to manually set the position. Example here.

edited Sep 07 '11 at 11:13

answered Sep 07 '11 at 07:15

Bojangles

99,427
50
170
208

With those examples, how would you center align the pointer? Js? – Harry Sep 07 '11 at 07:17
You just need to use the property indicated with `/* controls XXXXXX position */` in the css http://nicolasgallagher.com/pure-css-speech-bubbles/demo/default.css – Py. Sep 07 '11 at 07:21
@Harry I've edited the JSFiddle with an example. Please see my edits. – Bojangles Sep 07 '11 at 11:13

CSS3 menu shape, style

2 Answers2

Linked