CSS3菜单形状，风格

Question

任何人都可以告诉我如何在CSS中制作这样的形状，三角形的中心位于顶部或底部，就像我想要的那样？

修改

有一个元素。

Answer 1

@harry;有很多方法可以创建这种类型的三角形箭头。我编辑@jam小提琴＆amp;以箭头为中心。

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/

Answer 2

有this JSFiddle，这将主要执行您想要的操作。但是，“尖头位”只会向左对齐。我建议你看看these examples，看看是否有任何与你想要的相似。

---

要使框内的箭头居中，请为其指定left: 15px属性，框的宽度为50px。这将使箭头居中，但唯一的问题是您必须手动设置位置。示例here。