与箭头的讲话泡影 [英] Speech bubble with arrow

问题描述

我有一个项目，需要插入语音气泡/消息框。我想实现的一般形状是这一个：

  .bubble {height： 100px; width：200px; border：3px solid gray;背景：lightgray;位置：相对; cursor：pointer;}。triangle {width：0; border-top：20px solid black; border-left：20px solid transparent; border-right：20px solid transparent; cursor：pointer;}  

 < div class = >语音气泡< / div>< div class =triangle>< / div>  

这个目前没有通过命中测试，透明边框也可以点击。

目标

• 命中框（可点击区域/悬停区域）需要符合形状的边界

我需要在各种内容（图片，渐变，文字...）上显示形状，

>

问题

操纵这个形状是：

• 有能力根据位置移动三角形围绕气泡

解决方案

为了实现这一点，你应该考虑改变你的标记，以使你的HTML更有效率。这可以使用伪元素来实现。

首先，

使用伪元素避免额外元素

您可以使用伪元素来移除额外的 .triangle div。这不仅减少了你的div数，而且有助于定位，你可以使用 top： left： right：和 bottom： css属性，以便根据您的主元素进行定位。如下所示：

  .oneAndOnlyDiv {height：100px; width：200px; border：3px solid gray;背景：lightgray; position：relative;}。oneAndOnlyDiv：before {content：; position：absolute;顶部：100％; left：20px; width：0; border-top：20px solid black; border-left：20px solid transparent; border-right：20px solid transparent;}  

 < div class =oneAndOnlyDiv> Main div< / div>  

---

命中测试

为了创建你的命中测试，你可能希望使用一个旋转的元素， hack。

类似：

  div {height： 100px; width：200px;背景：灰色位置：相对; cursor：pointer;} div：before {content：; position：absolute; top：100％; left：20px; height：20px; width：20px;背景：黑色; transform：rotate（45deg）; transform-origin：top right;}  

 < div&只有元素< / div>  

伪元素：

  div {height：100px; width：200px;背景：灰色位置：相对; cursor：pointer;} div：before {content：; position：absolute; top：90％; left：20px;身高：30％ width：20px;背景：黑色; transform：skewY（-45deg）; transform-origin：left left; z-index：-1;}  

 < div&只有元素< / div>  

方形或主要元素是悬浮的。
但是挂起，弄乱了定位？你该如何处理？

有几个解决方案。其中一个是使用 calc CSS属性。

  div {height：100px; width：200px;背景：灰色位置：相对; cursor：pointer;} div：before {content：; position：absolute; top：-webkit-calc（100％ -  10px）; / *可能需要前缀为旧的浏览器支持* / top：calc（100％ -  10px）; /*i.e。一半高* /左：20px; height：20px; width：20px;背景：灰色transform：rotate（45deg）;}  

 < div&只有元素< / div>  

添加边框

现在可以很容易地添加边框，只需在主元素中添加一个边框声明，并设置 border-bottom 和 border-right 的继承

边框

  div {height：100px; width：200px;背景：灰色位置：相对; cursor：pointer; border：3px double black;} div：before {content：; position：absolute; top：-webkit-calc（100％ -  10px）; / *可能需要前缀为旧的浏览器支持* / top：calc（100％ -  10px）; /*i.e。一半高* /左：20px; height：20px; width：20px;背景：灰色transform：rotate（45deg）; border-bottom：inherit; border-right：inherit; box-shadow：inherit;}  

 < div& 

strong>

为了有一个框阴影，我使用：之后隐藏框阴影在其他伪元素，使元素看起来像一个单一的元素。

  div {height：100px; width：200px;背景：灰色位置：相对; cursor：pointer; box-shadow：5px 5px 10px 2px black;} div：before，div：after {content：; position：absolute; top：-webkit-calc（100％ -  10px）; / *可能需要前缀为旧的浏览器支持* / top：calc（100％ -  10px）; /*i.e。一半高* /左：20px; height：20px; width：20px;背景：灰色transform：rotate（45deg）; z-index：-1; box-shadow：inherit;} div：after {box-shadow：none; z-index：8; }  

 < div& / code> 

完全

$ b b

您还可以使用border-radius属性将一个边框半径添加到您的消息框或语音泡泡：

  div {height：100px; width：200px;背景：灰色位置：相对; cursor：pointer; border：3px double black; border-radius：10px;} div：before {content：; position：absolute; top：-webkit-calc（100％ -  10px）; / *可能需要前缀为旧的浏览器支持* / top：calc（100％ -  10px）; /*i.e。一半高* /左：20px; height：20px; width：20px;背景：灰色transform：rotate（45deg）; border-bottom：inherit; border-right：inherit; box-shadow：inherit;}  

 < div&元素< / div>  

  div {height：100px; width：200px;背景：灰色位置：相对; cursor：pointer; border：3px double black; border-radius：10px;} div：before {content：; position：absolute; top：-webkit-calc（100％ -  13px）; / *可能需要前缀为旧浏览器支持* / top：calc（100％ -  13px）; /*i.e。一半高度+边框* /左：20px; height：20px; width：20px;背景：灰色transform：rotate（45deg）; border：3px double double; border-bottom：inherit; border-right：inherit; box-shadow：inherit; border-radius：50％;}  

 < div&只有元素< / div>  

溢出和隐藏在这个伪元素的后面，你不担心有边框，你可以使用一个负z-index，这将解决这个问题。

不喜欢使用魔法数字？

如果你不喜欢使用calc值的想法，其中我的答案中的定位目前正在使用（工作时），您可以使用 transform：translate（50％）

更好的方法，因为：

• 您不需要知道边框的大小，也不需要宽度的一半
$ b $

  div {height：100px; width：200px;背景：灰色位置：相对; cursor：pointer; border：3px double black; border-radius：10px;} div：before {content：; position：absolute; top：100％; left：30px; height：20px; width：20px;背景：灰色box-sizing：border-box; transform：rotate（45deg）translate（-50％）; border-bottom：inherit; border-right：inherit; box-shadow：inherit;}  

 < div&元素< / div>  





您可以！





  div {height：100px; width：200px;背景：灰色位置：相对; cursor：pointer; border：3px double black; border-radius：10px;} div：before {content：; position：absolute; top：100％;左：10％; height：20px; width：20px;背景：灰色box-sizing：border-box; transform：rotate（45deg）translate（-50％）; border-bottom：inherit; border-right：inherit; box-shadow：继承; transition：all 0.8s;} div：hover：before {left：90％;}  

 < div>只有元素< / div>  


$ b $
true>

  div {height：100px; width：200px;背景：灰色位置：相对; cursor：pointer; border：3px double black; border-radius：10px;} div：before {content：; position：absolute; top：15％;左：100％; height：20px; width：20px;背景：灰色box-sizing：border-box; transform：rotate（45deg）translate（-50％）; border-top：inherit; border-right：inherit; box-shadow：inherit; transition：all 0.8s;} div：hover：before {top：80％; }  

 < div& / code>