CSS3 菜单形状、样式

Question

谁能告诉我如何在 CSS 中制作这样的形状，三 Angular 形在顶部或底部居中，就像我想要的那样？

编辑:

只有一个元素。

Answer 1

@哈利；有很多方法可以创建这种类型的三 Angular 形箭头。我编辑@jam fiddle 并将箭头居中。

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

检查这个例子http://jsfiddle.net/sandeep/wWykY/2/