如何在包括箭头尖端的盒子周围应用盒子阴影？

Question

我正在尝试使用阴影框创建工具提示。一切正常。但是我无法将阴影带到工具提示部分（箭头部分）如何获得它？

这是我的代码：

＆＃13;

＆＃13;

.parent {
  position: relative;
  border: 1px dashed green;
  height: 200px;
}

.toolTip {
  position: absolute;
  background: #fff;
  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.3);
  border-radius: 5px;
  width: 100px;
  height: 100px;
  top: 50px;
  left: 50px;
}

.tipPoint {
  position: absolute;
  top: -15px;
  right: 20px;
  z-index: 100;
  width: 0;
  height: 0;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-bottom: 15px solid white;
  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.3);
}

＆＃13;

<div class="parent">
  <div class="toolTip">
    <span class="tipPoint"></span>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

另一种解决方案是使用filter属性设置为drop-shadow 此外，您还需要使用:after伪选择器作为箭头。

供应商前缀可用，但遗憾的是IE不支持该功能。检查browser compatibility。

.toolTip {
  position: absolute;
  background: #fff;
  width: 100px;
  height: 100px;
  top: 50px;
  left: 50px;
  filter: drop-shadow(0px 0px 5px rgba(0, 0, 0, .5));
}

.toolTip:after {
  content: " ";
  position: absolute;
  top: -15px;
  right: 20px;
  width: 0;
  height: 0;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-bottom: 15px solid white;
}

<div class="parent">
  <div class="toolTip">
  </div>
</div>

Answer 2

调整box-shadow属性

属性box-shadow实际上已应用于您的元素.tipPoint，但阴影位于框的底部。您可以通过更改.tipPoint上的阴影方向来轻松调整其值：例如，以下内容看起来不错：

box-shadow: 1px 0px 6px 0 rgba(0, 0, 0, 0.3);  

有关详细信息，请参阅此属性：

box shadow: <offset-x> <offset-y> <blur-radius> <spread-radius> <color>

.parent {
  position: relative;
  border: 1px dashed green;
  height: 200px;
}

.toolTip {
  position: absolute;
  background: #fff;
  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.3);
  border-radius: 5px;
  width: 100px;
  height: 100px;
  top: 50px;
  left: 50px;
}

.tipPoint {
  position: absolute;
  top: -15px;
  right: 20px;
  z-index: 100;
  width: 0;
  height: 0;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-bottom: 15px solid white;
  box-shadow: 1px 0px 6px 0 rgba(0, 0, 0, 0.3);
}

<div class="parent">
  <div class="toolTip">
    <span class="tipPoint"></span>
  </div>
</div>

提示：Chrome有一个很好的阴影编辑器，可用于设置值：

创建带阴影的箭头

如果你真的想要做对，那么就有办法制作带阴影的箭头。您可以使用:after伪选择器，而不是在tipPoint下设置子.toolTip。将创建一个立方体并使用transform将其旋转45度：

.tipPoint {
  width: 100px;
  height: 100px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 16px 10px -17px rgba(0, 0, 0, 0.5);
}
.tipPoint:after {
  content: "";
  position: absolute;
  width: 50px;
  height: 50px;
  background: #999;
  transform: rotate(45deg); /* Prefixes... */
  top: 75px;
  left: 25px;
  box-shadow: -1px -1px 10px -2px rgba(0, 0, 0, 0.5);
}

<div class="tipPoint"></div>

Answer 3

您可以通过在主元素上使用框阴影以及相互叠加的伪元素来实现此目的。只使用一个元素时，此方法将在工具提示周围产生无缝阴影。

请参阅codepen for demo：https://codepen.io/JKudla/pen/GvWYEx

.Tooltip {
  width: 15em;
  height: 10em;
  background: #fff;
  box-shadow: 0 0 10px 0 rgba(0,0,0,0.5);
  position: relative;
}
.Tooltip:after,
.Tooltip:before {
  content: '';
  background: #fff;
  position: absolute;
  height: 1.5em;
}
.Tooltip:before {
  width: 1.5em;
  right: 1.5em;
  transform: rotate(45deg);
  top: -0.75em;
  box-shadow: 0 0 10px 0 rgba(0,0,0,0.5);
  z-index: 0;
}
.Tooltip:after {
  width: 3em;
  top: 0;
  right: 0.75em;
  z-index: 1;
}