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 ?

Edit:

With one element.

回答1:

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

回答2:

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.

来源：https://stackoverflow.com/questions/7330027/css3-menu-shape-style