在css中将div划分为不规则形状的方法 [英] Way to clip a div to an irregular shape in css

问题描述

我有一个圆角的 div 一个包含一些滚动内容的变量高度的工具提示。在它的左边是一个箭头，指向触发它被显示的元素。箭头可以位于左侧的任何地方，并且工具提示容器的高度变化。目前我有箭头实现为css三角形与 ::之前和 ::后伪元素的背景和边框。

我试图将工具提示div的滚动内容扩展到左侧箭头的背景中，做它。我看过css clip 属性，但它只适用于矩形。 -webkit-mask-image 似乎很有趣，但不能解释工具提示容器的箭头和变量高度的动态放置。保持边界和阴影在一切对我也很重要。

我正在寻找一个最新的Chrome，Safari和Firefox工作的解决方案。我愿意回退到其他浏览器中不能支持效果的东西。

有关如何做到这一点的任何想法？我一直在想这一段时间，真的一直在亏损。

下面是我如何使工具提示外观。

解决方案

这里有一种可能性，一些JS：

  body {background：gray;}。 position：absolute; top：2em; left：10em; width：20em; &：before {content：; position：absolute; top：1em;左：-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;清除： & .m-1 {width：2em; height：1em; }& .m-2 {width：1.1em; height：1em; }& .m-3 {width：0.2em;身高：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 praetentium excepturi natus voluptatem atque adipisci porro voluptatum libero！< p> Lorem ipsum dolor sit amet，consectetur adipisicing elit。 Ducimus pariatur veniam laboriosam sapiente aut aspernatur optio aperiam mollitia explicabo ut vero praetentium excepturi natus voluptatem atque adipisci porro voluptatum libero！< p> Lorem ipsum dolor sit amet，consectetur adipisicing elit。 Ducimus pariatur veniam laboriosam sapiente aut aspernatur optio aperiam mollitia explicabo ut vero praetentium excepturi natus voluptatem atque adipisci porro voluptatum libero！< p> Lorem ipsum dolor sit amet，consectetur adipisicing elit。 
 p> 

原则是这样：您可以添加不同高度和宽度的浮动div（或伪元素）来伪造文本形状该文本是你想要扩展到三角形中）。

我做的笔只是一个原理的演示，而不是为了适应你的具体情况。如果你要使用这种塑造文本的方法，它听起来像你必须写一些JS，将编程创建浮动div，并指定宽度和高度，取决于箭头在任何给定的气泡的位置。

I have a rounded div tooltip of a variable height that contains some scrolling content. On the left of it is an arrow that points to the element that triggered it being shown. The arrow can be located anywhere on the left side and the height of the tooltip container varies. Currently I have the arrow implemented as a css triangle with ::before and ::after pseudo-elements for the background and border.

I'm trying to extend the scrolling content of the tooltip div into the background of the arrow on the left side and am at a loss as to how to do it. I've looked at the css clip property but it only works with rectangles. -webkit-mask-image seems interesting but can't account for the dynamic placement of the arrow and variable height of the tooltip container. Maintaining a border and shadow around everything is important to me too.

I'm looking for a solution that will at very least work in the latest Chrome, Safari, and Firefox. I'm willing to fallback to something else in other browsers that can't support the effect.

Any ideas on how this can be done? I've been thinking about this for a while and really been at a loss.

Below is how I'm trying to make the tooltip look. The content inside scrolls and that scrolling can be seen inside the arrow.

解决方案

Here's a possibility, whose success would depend on some 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>

The principle is this: You can add floating divs (or pseudo-elements) of varying heights and widths to fake a text shape (assuming that text is what you want to extend into the triangle).

The Pen I made is just a demo of that principle, not made to fit your specific situation. If you were going to use this method of shaping text, it sounds like you would have to write some JS that would programmatically create the floating divs and assign them widths and heights depending on where the arrow falls for any given bubble.

这篇关于在css中将div划分为不规则形状的方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！