如何将背景图案图像应用于html工具提示箭头？

Question

我正在为工具提示实现自定义jquery插件。当鼠标悬停在特定元素上时，此插件将显示工具提示框。我的工具提示块区域有一个指向基本元素的箭头。

我想将重复纹理图像应用于整个工具提示，包括箭头。 我可以将图案图像指定给工具提示背景，但我如何将其指定给箭头。

我的问题在下图中有更详细的说明：

以下是箭头的代码：
HTML：

<div class="tooltip_outer">
  <div class="tooltip_arrow"></div>
  <div class="tooltip_txt">Tooltip content</div>
</div>

CSS：

.tooltip_outer {
  position: absolute;
  z-index: 5;
  background: #000000 url(images/pattern.png);
  padding: 0;
  margin: 5px 3px;
  width: 135px;
  box-shadow: 0 0 10px #999;
}
.tooltip_arrow {
  top: -14px;
  position: absolute;
  border: 7px solid transparent;
  display: inline-block;
  border-width: 7px;
  border-bottom-color: #000000;
  left: 50%;
}
.tooltip_txt {
  margin: 10px;
  color: white;
}

请指导我。提前谢谢。

Answer 1

使用CSS，您无法将背景图像应用于边框。边界旨在作为边界，而不是形状。

您可以使用旋转45度的DIV作为箭头，但旧浏览器存在问题。

编辑：我发现了一种新的CSS3适用于向边框添加图案图像，我认为这正是您所寻找的：

http://www.vanseodesign.com/css/border-images/

Answer 2

有点晚了，但希望对遇到同样问题的人有用。

我使用 scss 和属性剪辑路径制作了一个代码笔，您可以在其中设置箭头的方向、位置和大小，如果需要，还可以设置边框的大小。

https://codepen.io/onyphlax/pen/OJbpbGR

.tooltip {
  display: inline-block;
  padding: 4px;
  padding-bottom: calc(10px + 2px);
  background-color: fuchsia;
  position: relative;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - calc(10px + 2px)), calc(calc(50%) + calc(10px + 2px)) calc(100% - calc(10px + 2px)), calc(50%) 100%, calc(calc(50%) - calc(10px + 2px)) calc(100% - calc(10px + 2px)), 0 calc(100% - calc(10px + 2px)));
}
.tooltip__container {
  padding-bottom: 10px;
  margin-bottom: -6px;
  background-image: linear-gradient(to bottom right, cyan, purple);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(50% + 10px) calc(100% - 10px), 50% 100%, calc(50% - 10px) calc(100% - 10px), 0 calc(100% - 10px));
}
.tooltip__content {
  padding: 1rem;
  color: white;
}

<div class="tooltip">
  <div class="tooltip__container">
    <div class="tooltip__content">I'm a tooltip</div>  
  </div>
</div>