CODEWITHSUNDEEP
css
Harry
Harry

Reputation: 13329

CSS3 menu shape, style

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.

Upvotes: 0

Views: 2245

Answers (2)

Bojangles
Bojangles

Reputation: 101533

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.

Upvotes: 1

sandeep
sandeep

Reputation: 92813

@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/

Upvotes: 2

Related Questions