2

我有div一个可变高度的圆形工具提示，其中包含一些滚动内容。它的左侧是一个箭头，指向触发它显示的元素。箭头可以位于左侧的任何位置，并且工具提示容器的高度会有所不同。目前，我将箭头实现为带有背景和边框的伪元素的 CSS::before三角形::after。

我正在尝试将工具提示 div 的滚动内容扩展到左侧箭头的背景中，但不知道该怎么做。我查看了 cssclip属性，但它仅适用于矩形。-webkit-mask-image看起来很有趣，但无法解释箭头的动态放置和工具提示容器的可变高度。在所有东西周围保持边界和阴影对我来说也很重要。

我正在寻找一种至少可以在最新的 Chrome、Safari 和 Firefox 中运行的解决方案。我愿意回退到其他无法支持该效果的浏览器中的其他内容。

关于如何做到这一点的任何想法？我已经考虑了一段时间，真的很茫然。

下面是我试图使工具提示看起来的方式。滚动里面的内容和滚动可以在箭头里面看到。

我如何尝试剪辑 div 元素。

4

1 回答 1

0

这是一种可能性，其成功将取决于一些 JS：

body {
  background: gray;
}

.test {
  background: white;
  position: absolute;
  top: 2em;
  left: 10em;
  width: 20em;
  &:before {
    content: "";
    position: absolute;
    top: 1em;
    left: -4em;
    border-width: 2em;
    border-style: solid;
    border-color: transparent;
    border-right-color: white;
  }
}

.test-inner {
  position: relative;
  margin-left: -1.5em;
}

.padder {
  float: left;
  clear: both;
  &.m-1 {
    width: 2em;
    height: 1em;
  }
  &.m-2 {
    width: 1.1em;
    height: 1em;
  }
  &.m-3 {
    width: 0.2em;
    height: 1.6em;
  }
  &.m-4 {
    width: 1.1em;
    height: 1em;
  }
  &.m-5 {
    width: 2em;
    height: 3em;
  }

}
<div class="test">
  <div class="test-inner">
    <div class="padder m-1"></div>
    <div class="padder m-2"></div>
    <div class="padder m-3"></div>
    <div class="padder m-4"></div>
    <div class="padder m-5"></div>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate blanditiis ex consectetur suscipit eos ipsa nulla obcaecati provident repellat minima vel reprehenderit dignissimos sed sapiente voluptas nesciunt quo non molestiae.
  </div>
</div>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus pariatur veniam laboriosam sapiente aut aspernatur optio aperiam mollitia explicabo ut vero praesentium excepturi natus voluptatem atque adipisci porro voluptatum libero!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus pariatur veniam laboriosam sapiente aut aspernatur optio aperiam mollitia explicabo ut vero praesentium excepturi natus voluptatem atque adipisci porro voluptatum libero!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus pariatur veniam laboriosam sapiente aut aspernatur optio aperiam mollitia explicabo ut vero praesentium excepturi natus voluptatem atque adipisci porro voluptatum libero!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus pariatur veniam laboriosam sapiente aut aspernatur optio aperiam mollitia explicabo ut vero praesentium excepturi natus voluptatem atque adipisci porro voluptatum libero!</p>

原理是这样的：您可以添加不同高度和宽度的浮动 div（或伪元素）来伪造文本形状（假设文本是您想要延伸到三角形中的内容）。

我做的笔只是这个原理的一个演示，不是为了适应你的具体情况。如果你打算使用这种塑造文本的方法，听起来你必须编写一些 JS 以编程方式创建浮动 div 并根据箭头在任何给定气泡的位置为其分配宽度和高度。

于 2014-01-02T04:39:00.500 回答