HTML / CSS使用箭头底部创建Div

Question

我正在尝试将以下对象创建为HTML / CSS中的DIV。

我创建了以下用于测试的jsfiddle： http://jsfiddle.net/fz4f4xjv/2/

下面是我的代码，但我不知道如何在底部创建箭头：

<div id="menuSelected"></div>
#menuSelected {
    width: 250px;
    height: 35px;
    background-color: #368EC5;
}

谢谢你：）

Answer 1

将具有绝对位置的范围添加到该div。

<div class="menuSelected"><span></span></div>

#menuSelected {
    position: relative;
    width: 250px;
    height: 35px;
    background-color: #368EC5;
}
span {
    border-top: 10px solid #368EC5;
    border-right: 10px solid transparent;
    border-left: 10px solid transparent;
    position: absolute;
    bottom: -10px;
    left: 20px;
}

请参阅updated fiddle。