我们怎样才能改变bootstrap popover中箭头的颜色？

Question

  <div class="  affix  popover right" id ="one" style="margin-left:8em;margin-top:10em;  width:15em;background-color:rgba(228,19,47,0.9);padding:5px;border-radius:10px;">
    <div class="arrow" style="margin-top:-45px;"></div> 
    <center style="padding:20px;"><b>this is the message</b></center>
 </div>

此代码使用箭头创建弹出框,我们如何更改此箭头的颜色.

Answer 1

使用此css更改psudo元素的border-right颜色:

.popover.right .arrow:after {
  border-right-color: red;
}

DEMO

Answer 2

在 Bootstrap 3 中使用标准弹出窗口，如下所示：

<button type="button" class="btn btn-default" data-toggle="popover" data-placement="right" data-content="this is the message">
  Popover on right
</button>

您可以将以下css添加到自定义规则中：

.popover {
  background-color: red; /*substitute 'red' with your color of choice*/
  border-color: red;
}
.popover.right>.arrow:after {
  border-right-color: red;
}
.popover-content {
  background-color: red;
}

Answer 3

在 Bootstrap 4 中，

.bs-popover-top .arrow::after,
.bs-popover-auto[x-placement^="top"] .arrow::after {
    border-top-color: yellow; // Any color here
}