标签 html css css-shapes
<分区>
我有一个可变高度的圆形 div 工具提示，其中包含一些滚动内容。它的左侧是一个箭头，指向触发它显示的元素。箭头可以位于左侧的任何位置，工具提示容器的高度也不同。目前，我将箭头实现为带有 ::before 和 ::after 背景和边框伪元素的 css 三 Angular 形。
我正在尝试将工具提示 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>原理是这样的:您可以添加不同高度和宽度的 float div(或伪元素)来伪造文本形状(假设文本是您想要延伸到三 Angular 形中的内容) .
我制作的 Pen 只是该原理的演示，并不是针对您的具体情况而制作的。如果您要使用这种调整文本形状的方法，听起来您必须编写一些 JS，以编程方式创建 float div，并根据箭头落在任何给定气泡的位置为它们分配宽度和高度。
关于html - 在css中将div剪辑成不规则形状的方法，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19759289/