gpt4 book ai didi

html - 在css中将div剪辑成不规则形状的方法

转载 作者:行者123 更新时间:2023-11-28 03:28:09 24 4
gpt4 key购买 nike

<分区>

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

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

我正在寻找至少可以在最新的 Chrome、Safari 和 Firefox 中运行的解决方案。我愿意在其他不支持该效果的浏览器中退而求其次。

关于如何做到这一点有什么想法吗?我一直在想这个问题,真的很茫然。

下面是我试图使工具提示看起来如何。滚动中的内容和滚动可以在箭头内部看到。

How I'm trying to clip the div element.

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com