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。

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

HTML/CSS Create Div with Arrow Bottom

html

css

css-shapes