CSS3菜单的形状，样式

Question

谁能打电话给我我该如何在CSS中制作一个这样的形状，使三角形的顶部或底部居中？

编辑：

与一个元素。

Answer 1

@harry; 有很多方法可以创建这种类型的三角形箭头。 我编辑@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/

Answer 2

有这个JSFiddle ，它将主要执行您想要的操作。 但是，“尖的位”将仅向左对齐。 我建议您看看这些示例 ，看看是否有与您想要的相似的示例 。

---

要使箭头位于框下面，请使其left: 15px属性，条件是框的宽度为50px 。 这将使箭头居中，但唯一的问题是您将必须手动设置位置。 这里的例子。