我有一个圆角的div包含一些滚动内容的可变高度工具提示。它的左边是一个箭头，指向触发它显示的元素。箭头可以位于左侧的任何位置，并且工具提示容器的高度可以变化。目前，我已将箭头实施为一个css三角形，其中::before和::after用于背景和边框的伪元素。在css中将div剪裁成不规则形状的方法
我正在尝试将工具提示div的滚动内容扩展到左侧的箭头背景中，并且不知道如何去做。我已经看过了css clip属性，但它只能用于矩形。 -webkit-mask-image似乎很有趣，但不能说明工具提示容器的箭头和可变高度的动态放置。保持一切边界和阴影对我来说也很重要。
我正在寻找一种至少可以在最新的Chrome，Safari和Firefox中工作的解决方案。我愿意回退到其他浏览器中无法支持该效果的其他内容。
关于如何做到这一点的任何想法？我一直在想这个问题一段时间，真的很茫然。
以下是我试图使工具提示外观。箭头内可以看到滚动内容和滚动内容。
这里有一个可能性，它的成功将取决于一些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并根据箭头落在给定的气泡的位置来分配它们的宽度和高度。
我会使用一个图像，这不能在CSS中完成，我不确定它是否可以用JavaScript来完成。 – 2013-11-03 23:19:09
很好的描述，但是您用于该元素的CSS将极大地帮助我们重新创建它。小心添加它？ –
另外，你想如何处理内容宽度的变化？意思是整个内容变得更大并向左移动？ –