CSS仅工具提示箭头 - 带背景，边框和箱阴影？

Question

工具提示CSS

.has-tooltip .tooltip {
    position: absolute;
    left: 50%;
    top: -40px;
    opacity: 0;
    -webkit-transition: ease-out 300ms opacity;
       -moz-transition: ease-out 300ms opacity 0ms;
         -o-transition: ease-out 300ms opacity 0ms;
            transition: ease-out 300ms opacity 0ms;
    -webkit-transition-delay: 0ms;
    pointer-events: none;
    z-index: 9999;
}
.has-tooltip .tooltip span {
    position: relative;
    left: -50%;
    display: block;
    padding: 2px 8px;
    font-size: 14px;
    color: #fff;
    white-space: nowrap;
    background: rgba(45, 45, 45, 1);
    border: 1px solid rgba(204,204,204,0.60);
    -webkit-border-radius: 6px;
       -moz-border-radius: 6px;
            border-radius: 6px;
    -webkit-box-shadow: 0px 0px 0px 6px rgba(0,0,0,0.50);
       -moz-box-shadow: 0px 0px 0px 6px rgba(0,0,0,0.50);
            box-shadow: 0px 0px 0px 6px rgba(0,0,0,0.50);
}

View Live Example

我正在努力实现

只有一个元素，有一个工具提示样式，如上面链接中所示，工具提示箭头也应用了相同的外观，看起来像是一个元素。我已经看到多个将箭头中的另一个元素放在箭头中，但是我希望能够实现这一目标而不需要这样做。

问题

如何使用工具提示箭头给出的印象是应用了相同样式的工具提示的一部分。

注意：如果你提供代码，请你完全解释一下你做了什么，这样我就可以实现顶尖和尖端。

Answer 1

您可以使用伪元素，即::before，并将其旋转45度并将其定位在距离底部一半高度的位置，使其看起来像箭头。

＆＃13;

＆＃13;

a.has-tooltip {
  position: relative;
  transition: opacity 0.5s;
}
a.has-tooltip span {
  position: absolute;
  left: 20%; top: 50%;
  transform: translate(0,-150%);
  background: #333;
  color: white;
  border-radius: 10px;
  box-shadow: 2px 2px 6px rgba(0,0,0,0.5);
  padding: 10px;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.2s;
  border: 4px solid #999;
}
a.has-tooltip span::before {
  content: '';
  position: absolute;
  left: 20%; top: calc(100% - 10px);
  height: 20px; width: 20px;
  transform: rotate(45deg);
  background: inherit;
  box-shadow: 2px 2px 4px rgba(0,0,0,0.3);
  z-index: -1;
  border: inherit;
  border-width: 0 4px 4px 0;
}

a.has-tooltip:hover span {
  opacity: 1;
}

＆＃13;

<br><br><br>
<a href="#" class="has-tooltip" id="link"><span>Hi! I'm a tooltip!</span>
  Hi! I'm a link!
</a>

＆＃13;

＆＃13;

＆＃13;

根据评论更新

当一个人制作这样的阴影，并且因为它实际上是一个正方形时，它们的2个阴影相交

＆＃13;

＆＃13;

a.has-tooltip {
  position: relative;
  transition: opacity 0.5s;
}
a.has-tooltip span {
  position: absolute;
  left: 20%; top: -10%;
  transform: translate(0,-150%);
  background: #333;
  color: white;
  border-radius: 5px;
	-webkit-box-shadow: 0px 0px 0px 6px rgba(0,0,0,0.50);
	   -moz-box-shadow: 0px 0px 0px 6px rgba(0,0,0,0.50);
			box-shadow: 0px 0px 0px 6px rgba(0,0,0,0.50);
  padding: 10px;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.2s;
  border: 1px solid #FFFFFF;
}
a.has-tooltip span::before {
  content: '';
  position: absolute;
  left: 10%; top: calc(100% - 10px);
  height: 20px; width: 20px;
  transform: rotate(45deg);
  background: inherit;
  -webkit-box-shadow: 4px 4px 0px 2px rgba(0,0,0,0.50);
	   -moz-box-shadow: 4px 4px 0px 2px rgba(0,0,0,0.50);
			    box-shadow: 4px 4px 0px 2px rgba(0,0,0,0.50);
  z-index: -1;
  border-right: 1px solid #FFFFFF;
  border-bottom: 1px solid #FFFFFF; 
}

a.has-tooltip:hover span { opacity: 1; }

＆＃13;

<br><br><br><br>
<a href="#" class="has-tooltip" id="link"><span>Hi! I'm a tooltip!</span>
  Hi! I'm a link!
</a>

＆＃13;

＆＃13;

＆＃13;

要解决这个问题几乎是不可能的，除非使用SVG，但这里有两种可能的解决方案。

1. 为阴影提供不透明的颜色
＆＃13;
＆＃13;
a.has-tooltip {
  position: relative;
  transition: opacity 0.5s;
}
a.has-tooltip span {
  position: absolute;
  left: 20%; top: -10%;
  transform: translate(0,-150%);
  background: #333;
  color: white;
  border-radius: 5px;
	-webkit-box-shadow: 0px 0px 0px 6px rgba(128,128,128,1);
	   -moz-box-shadow: 0px 0px 0px 6px rgba(128,128,128,1);
			box-shadow: 0px 0px 0px 6px rgba(128,128,128,1);
  padding: 10px;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.2s;
  border: 1px solid #FFFFFF;
}
a.has-tooltip span::before {
  content: '';
  position: absolute;
  left: 10%; top: calc(100% - 10px);
  height: 20px; width: 20px;
  transform: rotate(45deg);
  background: inherit;
  -webkit-box-shadow: 4px 4px 0px 2px rgba(128,128,128,1);
	   -moz-box-shadow: 4px 4px 0px 2px rgba(128,128,128,1);
			    box-shadow: 4px 4px 0px 2px rgba(128,128,128,1);
  z-index: -1;
  border-right: 1px solid #FFFFFF;
  border-bottom: 1px solid #FFFFFF; 
}

a.has-tooltip:hover span { opacity: 1; }
＆＃13;
<br><br><br><br>
<a href="#" class="has-tooltip" id="link"><span>Hi! I'm a tooltip!</span>
  Hi! I'm a link!
</a>
＆＃13;
＆＃13;
＆＃13;
1. 使用另一个伪::after作为阴影，它将是透明的。有了这个，需要根据主阴影的大小和::after伪的位置进行一点。
＆＃13;
＆＃13;
a.has-tooltip {
  position: relative;
  transition: opacity 0.5s;
}
a.has-tooltip span {
  position: absolute;
  left: 20%; top: -10%;
  transform: translate(0,-150%);
  background: #333;
  color: white;
  border-radius: 5px;
	-webkit-box-shadow: 0px 0px 0px 5px rgba(0,0,0,0.50);
	   -moz-box-shadow: 0px 0px 0px 5px rgba(0,0,0,0.50);
			box-shadow: 0px 0px 0px 5px rgba(0,0,0,0.50);
  padding: 10px;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.2s;
  border: 1px solid #FFFFFF;
}
a.has-tooltip span::before {
  content: '';
  position: absolute;
  left: 10%; top: calc(100% - 10px);
  height: 20px; width: 20px;
  transform: rotate(45deg);
  background: inherit;
  z-index: -1;
  border-right: 1px solid #FFFFFF;
  border-bottom: 1px solid #FFFFFF; 
}
a.has-tooltip span::after {
  content: '';
  position: absolute;
  left: calc(10% - 5px); top: calc(100% + 6px);
  width: 0; 
  height: 0; 
  border-left: 16px solid transparent;
  border-right: 16px solid transparent;
  border-top: 16px solid rgba(0,0,0,0.50);
  z-index: -2;
}

a.has-tooltip:hover span { opacity: 1; }
＆＃13;
<br><br><br><br>
<a href="#" class="has-tooltip" id="link"><span>Hi! I'm a tooltip!</span>
  Hi! I'm a link!
</a>
＆＃13;
＆＃13;
＆＃13;