javascript - 弹出框阴影也需要用于箭头

Question

默认情况下，Bootstrap 有弹出框阴影。但我需要带有弹出箭头的相同阴影。如何只为箭头边框获取阴影。

这是 My-fiddle

谁能帮忙解决这个问题。

$(function () {
    $('#example').popover();
});

a{
  margin-top:100px;
}
.popover-content{
  min-height:200px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>

<link href="https://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>


<p>Click on button to see Popover</p>

<a href="#" id="example" class="btn btn-primary" rel="popover"
   data-content="This is the body of Popover"
   data-original-title="Creativity Tuts">pop
</a>

Answer 1

要制作三 Angular 形框阴影，您只需将正方形旋转 45 度并应用阴影:

.popover.right .arrow:before {
  content: "";
  display:block;
  position:absolute;
  z-index:-1;
  height:14.14px;
  width:14.14px;
  bottom:-8px;
  left:4px;
  background:transparent;
  transform: rotate(45deg);
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}

我还必须将背景添加到内容元素，因为阴影在它上面。如果您不能只向内容添加任何背景(或背景颜色)，您也可以使用 overflow:hidden。

.popover-content{
  background-color:#FFF;
}

fiddle :https://jsfiddle.net/ke35nzag/