html - 如何更改 Bootstrap 下拉列表 :before triangle to different shape

Question

经过一些研究，我了解到下拉菜单中的小三 Angular 形来自:before 伪类。但是当我试图改变它的形状时，无论我做什么它都不会改变。我想让它像一条连接我的下拉菜单和下拉菜单的粗线。有可能实现吗？我想在图片中实现这样的东西。

<div class="dropdown">
<a data-toggle="dropdown" href="#">Dropdown trigger</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
...
</ul>
</div>

这是 jsfiddle和我指的三 Angular 形。

Answer 1

您只需更改边框颜色和样式即可修改该三 Angular 形的外观。 Bootstrap 使用边框来塑造它。例如，这是一个带有连接标题和下拉菜单的灰色粗线的 fiddle :

http://jsfiddle.net/freginold/o0zuq7Lv/1/

您可以根据需要更改颜色以及线条的粗细，方法是使用 :before 和 :after 样式。

更新:要添加您自己的图标/Angular 色，请使用 dropdown-menu 样式进行调整，就像它们在这个 fiddle 中一样，以减薄边框并加宽内部区域:

http://jsfiddle.net/freginold/o0zuq7Lv/3/