HTML / CSS创建带有箭头底部的Div [重复]答案

【问题标题】：HTML/CSS Create Div with Arrow Bottom [duplicate]HTML / CSS创建带有箭头底部的Div [重复]
【发布时间】：2015-02-12 16:50:33
【问题描述】：

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

我创建了以下 jsfiddle 进行测试： http://jsfiddle.net/fz4f4xjv/2/

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

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

谢谢你:)

【问题讨论】：

我很确定在 CSS-Shapes 标签下有很多类似的问题。
这个问题也应该有帮助stackoverflow.com/questions/19719048/…
您可以创建一个 :after 标记并在那里设置一个三角形样式。 fe #menuSelected { 宽度：250px;高度：35px；背景颜色：#368EC5；位置：相对；边距：0 自动； } #menuSelected:after, #menuSelected::after { 位置：绝对；最高：100%；左：50%；左边距：-40%；内容： '';宽度：0；高度：0；边框顶部：实心 10px #368EC5；左边框：实心 10px 透明； border-right: 实心 10px 透明； }

标签： html css css-shapes

【解决方案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。

【讨论】：