我有一個圓角的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將極大地幫助我們重新創建它。小心添加它？ –
另外，你想如何處理內容寬度的變化？意思是整個內容變得更大並向左移動？ –