在css中将div剪切为不规则形状的方法

Question

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

我正在尝试将工具提示div的滚动内容扩展到左侧箭头的背景中，并且不知道如何操作它。我查看了css clip属性，但它只适用于矩形。 -webkit-mask-image似乎很有趣，但无法解释箭头的动态放置和工具提示容器的可变高度。保持一切边界和阴影对我来说也很重要。

我正在寻找一种至少可以在最新的Chrome，Safari和Firefox中使用的解决方案。我愿意在其他浏览器中回退到其他不能支持这种效果的东西。

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

以下是我尝试制作工具提示的方法。滚动内容和滚动内容可以在箭头内看到。

Answer 1

这是一种可能性，其成功取决于一些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并根据箭头在任何给定气泡下降的位置分配宽度和高度。