菜单项CSS下方的三角形

我的客户为我提供了他们网站的设计，其中包括一个标准菜单，活动项上有一个向下的三角形（见图）。我不知道从哪里开始…获得这种效果最好的方法是什么

---

这里有一个关于使用CSS生成箭头、三角形和其他形状的教程：

也有一个看看CSS箭头如何请！生成其箭头：

这里有一个我刚刚想到的小例子：

HTML:

JS小提琴：

<div class="active">
    <div>Active Menu Item</div>
</div>

.active > div {
    width: 150px;
    padding: 10px;
    background-color: #f00;
    color: #fff;
    text-align: center;
}
.active::after {
    display:block;
    content: "";
    font-size: 0px; line-height: 0%; width: 0px;
    border-top: 20px solid #f00;
    border-left: 85px solid #fff;
    border-right: 85px solid #fff;
}