更改bootstrap插入符的轮廓颜色

Question

我试图找出如何更改bootstrap插入符颜色。请参见下面的代码：

<div class="share-popup dropup dropdown-toggle">
    Open Dropdown
    <ul class="share-dropdown-menu">
        <li><a href="">Link 1</a></li>
        <li><a href="">Link 2</a></li>
        <span class="caret"></span>
    </ul>
</div>

我创建了jsfiddle http://jsfiddle.net/jason99/k43FT/。下面的图片将向您展示我想要完成的任务。

我正在使用以下css类，但无法弄清楚如何在插入符号中添加大纲：

.dropup .caret {
    border-top: 6px solid #fff;
    bottom: -4px;
    content: "";
    position: absolute;
    right: 130px;
}

Answer 1

我会在.dropup .caret上创建另一个三角形作为伪元素，如下所示：jsfiddle

.dropup .caret:after {
    content: "";
    position: absolute;
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-top: 8px solid orange;
    bottom: 0px;
    top: -6px;
    right: -12px;
    z-index: -1;
}

Answer 2

只有一种方法可以做到这一点而不需要太多的黑客攻击。你必须在插入符号中创建一个插入符号。像这样：

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

http://codepen.io/anon/pen/wftgC