带箭头的语音气泡

Question

带箭头的语音气泡

我有一个项目需要插入语音气泡/消息框..我想要达到的总体目标是：

.bubble {

  height: 100px;

  width: 200px;

  border: 3px solid gray;

  background: lightgray;

  position: relative;

  cursor:pointer;

}

.triangle {

  width: 0;

  border-top: 20px solid black;

  border-left: 20px solid transparent;

  border-right: 20px solid transparent;

  cursor:pointer;

}

<div class="bubble">Speech bubble

</div>

<div class="triangle">

</div>

这目前没有通过命中测试，因为透明的边框也是可点击的。

目标

• 命中框(可点击/悬停区域)需要坚持形状的边界(这里的透明边界也是悬停的，使之无效)。

• 我需要在不同的内容上显示形状(图像，食草动物，文本.)，

问题

我在处理这个形状时遇到的主要问题是：

• 有能力

  在语音气泡周围移动三角形

  根据它所指元素的位置(上/左/右/底)
• 在需要强调时，在其周围添加边框或框影。

是否有解决这些问题的办法？

Answer 1

为了实现这一点，您应该考虑修改您的标记，以使您的html更有效率。这可以使用伪元素来实现。我将逐一阐述每一点，并在回答的最后把所有的内容放在一起。首先，使用伪元素避免额外的元素您可以使用一个伪元素来删除额外的.triangle迪夫。这不仅减少了div的数量，而且还有助于定位，因为您可以使用top:&nbsp;left:&nbsp;right:和bottom:CSS属性，以便根据主元素进行定位。如下所示：.oneAndOnlyDiv {&nbsp; height: 100px;&nbsp; width: 200px;&nbsp; border: 3px solid gray;&nbsp; background: lightgray;&nbsp; position: relative;}.oneAndOnlyDiv:before {&nbsp; content: "";&nbsp; position: absolute;&nbsp; top: 100%;&nbsp; left: 20px;&nbsp; width: 0;&nbsp; border-top: 20px solid black;&nbsp; border-left: 20px solid transparent;&nbsp; border-right: 20px solid transparent;}<div class="oneAndOnlyDiv">Main div</div>命中测试为了创建您的“命中测试”，您可能希望使用一个旋转元素，而不是边框黑客。类似于：div&nbsp;{ &nbsp;&nbsp;height:&nbsp;100px; &nbsp;&nbsp;width:&nbsp;200px; &nbsp;&nbsp;background:&nbsp;gray; &nbsp;&nbsp;position:&nbsp;relative; &nbsp;&nbsp;cursor:pointer;}div:before&nbsp;{ &nbsp;&nbsp;content:&nbsp;""; &nbsp;&nbsp;position:&nbsp;absolute; &nbsp;&nbsp;top:&nbsp;100%; &nbsp;&nbsp;left:&nbsp;20px; &nbsp;&nbsp;height:&nbsp;20px; &nbsp;&nbsp;width:&nbsp;20px; &nbsp;&nbsp;background:&nbsp;black; &nbsp;&nbsp;transform:&nbsp;rotate(45deg); &nbsp;&nbsp;transform-origin:top&nbsp;right;}<div>Only&nbsp;element</div>或者使用扭曲的伪元素：div&nbsp;{ &nbsp;&nbsp;height:&nbsp;100px; &nbsp;&nbsp;width:&nbsp;200px; &nbsp;&nbsp;background:&nbsp;gray; &nbsp;&nbsp;position:&nbsp;relative; &nbsp;&nbsp;cursor:pointer;}div:before&nbsp;{ &nbsp;&nbsp;content:&nbsp;""; &nbsp;&nbsp;position:&nbsp;absolute; &nbsp;&nbsp;top:&nbsp;90%; &nbsp;&nbsp;left:&nbsp;20px; &nbsp;&nbsp;height:&nbsp;30%; &nbsp;&nbsp;width:&nbsp;20px; &nbsp;&nbsp;background:&nbsp;black; &nbsp;&nbsp;transform:&nbsp;skewY(-45deg); &nbsp;&nbsp;transform-origin:bottom&nbsp;left; &nbsp;&nbsp;z-index:-1;}<div>Only&nbsp;element</div>它只在正方形或主元素悬停时显示指针。但等等，那会搞砸定位吗？你怎么能应付得来？有几个解决办法。其中之一是使用calcCSS属性div&nbsp;{ &nbsp;&nbsp;height:&nbsp;100px; &nbsp;&nbsp;width:&nbsp;200px; &nbsp;&nbsp;background:&nbsp;gray; &nbsp;&nbsp;position:&nbsp;relative; &nbsp;&nbsp;cursor:pointer;}div:before&nbsp;{ &nbsp;&nbsp;content:&nbsp;""; &nbsp;&nbsp;position:&nbsp;absolute; &nbsp;&nbsp;top:&nbsp;-webkit-calc(100%&nbsp;-&nbsp;10px);&nbsp;/*may&nbsp;require&nbsp;prefix&nbsp;for&nbsp;old&nbsp;browser&nbsp;support*/ &nbsp;&nbsp;top:&nbsp;calc(100%&nbsp;-&nbsp;10px);&nbsp;/*i.e.&nbsp;half&nbsp;the&nbsp;height*/ &nbsp;&nbsp;left:&nbsp;20px; &nbsp;&nbsp;height:&nbsp;20px; &nbsp;&nbsp;width:&nbsp;20px; &nbsp;&nbsp;background:&nbsp;gray; &nbsp;&nbsp;transform:&nbsp;rotate(45deg);}<div>Only&nbsp;element</div>添加边框现在可以很容易地添加边框，只需将边界声明添加到主元素，并将border-bottom和border-right的伪元素的inherit边界div&nbsp;{ &nbsp;&nbsp;height:&nbsp;100px; &nbsp;&nbsp;width:&nbsp;200px; &nbsp;&nbsp;background:&nbsp;gray; &nbsp;&nbsp;position:&nbsp;relative; &nbsp;&nbsp;cursor:pointer; &nbsp;&nbsp;border:3px&nbsp;double&nbsp;black;}div:before&nbsp;{ &nbsp;&nbsp;content:&nbsp;""; &nbsp;&nbsp;position:&nbsp;absolute; &nbsp;&nbsp;top:&nbsp;-webkit-calc(100%&nbsp;-&nbsp;10px);&nbsp;/*may&nbsp;require&nbsp;prefix&nbsp;for&nbsp;old&nbsp;browser&nbsp;support*/ &nbsp;&nbsp;top:&nbsp;calc(100%&nbsp;-&nbsp;10px);&nbsp;/*i.e.&nbsp;half&nbsp;the&nbsp;height*/ &nbsp;&nbsp;left:&nbsp;20px; &nbsp;&nbsp;height:&nbsp;20px; &nbsp;&nbsp;width:&nbsp;20px; &nbsp;&nbsp;background:&nbsp;gray; &nbsp;&nbsp;transform:&nbsp;rotate(45deg); &nbsp;&nbsp;border-bottom:inherit; &nbsp;&nbsp;border-right:inherit; &nbsp;&nbsp;box-shadow:inherit;}<div>Only&nbsp;element</div>方框阴影：为了有一个盒子阴影，我使用了:after伪元素，以便将方框阴影隐藏在另一个伪元素上，使元素看起来像一个单一元素。div&nbsp;{ &nbsp;&nbsp;height:&nbsp;100px; &nbsp;&nbsp;width:&nbsp;200px; &nbsp;&nbsp;background:&nbsp;gray; &nbsp;&nbsp;position:&nbsp;relative; &nbsp;&nbsp;cursor:pointer; &nbsp;&nbsp;box-shadow:&nbsp;5px&nbsp;5px&nbsp;10px&nbsp;2px&nbsp;black;}div:before,div:after&nbsp;{ &nbsp;&nbsp;content:&nbsp;""; &nbsp;&nbsp;position:&nbsp;absolute; &nbsp;&nbsp;top:&nbsp;-webkit-calc(100%&nbsp;-&nbsp;10px);&nbsp;/*may&nbsp;require&nbsp;prefix&nbsp;for&nbsp;old&nbsp;browser&nbsp;support*/ &nbsp;&nbsp;top:&nbsp;calc(100%&nbsp;-&nbsp;10px);&nbsp;/*i.e.&nbsp;half&nbsp;the&nbsp;height*/ &nbsp;&nbsp;left:&nbsp;20px; &nbsp;&nbsp;height:&nbsp;20px; &nbsp;&nbsp;width:&nbsp;20px; &nbsp;&nbsp;background:&nbsp;gray; &nbsp;&nbsp;transform:&nbsp;rotate(45deg);z-index:-1; &nbsp;&nbsp;box-shadow:inherit;}div:after{ &nbsp;&nbsp;box-shadow:none; &nbsp;&nbsp;z-index:8; &nbsp;&nbsp;}<div>Only&nbsp;element</div>把一切都放在一起还可以使用“边框半径”属性将边框半径再次添加到消息框或语音气泡中：div {&nbsp; height: 100px;&nbsp; width: 200px;&nbsp; background: gray;&nbsp; position: relative;&nbsp; cursor:pointer;&nbsp; border:3px double black;&nbsp; border-radius:10px;}div:before {&nbsp; content: "";&nbsp; position: absolute;&nbsp; top: -webkit-calc(100% - 10px); /*may require prefix for old browser support*/&nbsp; top: calc(100% - 10px); /*i.e. half the height*/&nbsp; left: 20px;&nbsp; height: 20px;&nbsp; width: 20px;&nbsp; background: gray;&nbsp; transform: rotate(45deg);&nbsp; border-bottom:inherit;&nbsp; border-right:inherit;&nbsp; box-shadow:inherit;}<div>Only element</div>这甚至允许你不仅创建一个三角形，还可以用一个圆来代替它吗？div&nbsp;{ &nbsp;&nbsp;height:&nbsp;100px; &nbsp;&nbsp;width:&nbsp;200px; &nbsp;&nbsp;background:&nbsp;gray; &nbsp;&nbsp;position:&nbsp;relative; &nbsp;&nbsp;cursor:pointer; &nbsp;&nbsp;border:3px&nbsp;double&nbsp;black; &nbsp;&nbsp;border-radius:10px;}div:before&nbsp;{ &nbsp;&nbsp;content:&nbsp;""; &nbsp;&nbsp;position:&nbsp;absolute; &nbsp;&nbsp;top:&nbsp;-webkit-calc(100%&nbsp;-&nbsp;13px);&nbsp;/*may&nbsp;require&nbsp;prefix&nbsp;for&nbsp;old&nbsp;browser&nbsp;support*/ &nbsp;&nbsp;top:&nbsp;calc(100%&nbsp;-&nbsp;13px);&nbsp;/*i.e.&nbsp;half&nbsp;the&nbsp;height&nbsp;+&nbsp;border*/ &nbsp;&nbsp;left:&nbsp;20px; &nbsp;&nbsp;height:&nbsp;20px; &nbsp;&nbsp;width:&nbsp;20px; &nbsp;&nbsp;background:&nbsp;gray; &nbsp;&nbsp;transform:&nbsp;rotate(45deg); &nbsp;&nbsp;border:3px&nbsp;double&nbsp;transparent; &nbsp;&nbsp;border-bottom:inherit; &nbsp;&nbsp;border-right:inherit; &nbsp;&nbsp;box-shadow:inherit; &nbsp;&nbsp;border-radius:50%;}<div>Only&nbsp;element</div>如果您有内容溢出的问题，并且隐藏在这个伪元素后面，并且您不担心有一个边框，您可以使用一个负的z索引来解决这个问题。不喜欢用“魔法数字”？如果您不喜欢使用calc值的想法，其中我的答案中的位置当前正在使用(同时工作)，则可以使用transform:translate(50%)这将是一个更好的办法，因为：您不需要知道边框的大小，也不需要知道宽度的一半。您将使您的消息框/气泡的定位更加动态，并将支持进一步的大小。div {&nbsp; height: 100px;&nbsp; width: 200px;&nbsp; background: gray;&nbsp; position: relative;&nbsp; cursor: pointer;&nbsp; border: 3px double black;&nbsp; border-radius: 10px;}div:before {&nbsp; content: "";&nbsp; position: absolute;&nbsp; top: 100%;&nbsp; left: 30px;&nbsp; height: 20px;&nbsp; width: 20px;&nbsp; background: gray;&nbsp; box-sizing:border-box;&nbsp; transform: rotate(45deg) translate(-50%);&nbsp; border-bottom: inherit;&nbsp; border-right: inherit;&nbsp; box-shadow: inherit;}<div>Only element</div>想移动它吗？你可以的!div&nbsp;{ &nbsp;&nbsp;height:&nbsp;100px; &nbsp;&nbsp;width:&nbsp;200px; &nbsp;&nbsp;background:&nbsp;gray; &nbsp;&nbsp;position:&nbsp;relative; &nbsp;&nbsp;cursor:&nbsp;pointer; &nbsp;&nbsp;border:&nbsp;3px&nbsp;double&nbsp;black; &nbsp;&nbsp;border-radius:&nbsp;10px;}div:before&nbsp;{ &nbsp;&nbsp;content:&nbsp;""; &nbsp;&nbsp;position:&nbsp;absolute; &nbsp;&nbsp;top:&nbsp;100%; &nbsp;&nbsp;left:&nbsp;10%; &nbsp;&nbsp;height:&nbsp;20px; &nbsp;&nbsp;width:&nbsp;20px; &nbsp;&nbsp;background:&nbsp;gray; &nbsp;&nbsp;box-sizing:&nbsp;border-box; &nbsp;&nbsp;transform:&nbsp;rotate(45deg)&nbsp;translate(-50%); &nbsp;&nbsp;border-bottom:&nbsp;inherit; &nbsp;&nbsp;border-right:&nbsp;inherit; &nbsp;&nbsp;box-shadow:&nbsp;inherit; &nbsp;&nbsp;transition:&nbsp;all&nbsp;0.8s;}div:hover:before&nbsp;{ &nbsp;&nbsp;left:&nbsp;90%;}<div>Only&nbsp;element</div>想要一个对吗？div&nbsp;{ &nbsp;&nbsp;height:&nbsp;100px; &nbsp;&nbsp;width:&nbsp;200px; &nbsp;&nbsp;background:&nbsp;gray; &nbsp;&nbsp;position:&nbsp;relative; &nbsp;&nbsp;cursor:&nbsp;pointer; &nbsp;&nbsp;border:&nbsp;3px&nbsp;double&nbsp;black; &nbsp;&nbsp;border-radius:&nbsp;10px;}div:before&nbsp;{ &nbsp;&nbsp;content:&nbsp;""; &nbsp;&nbsp;position:&nbsp;absolute; &nbsp;&nbsp;top:&nbsp;15%; &nbsp;&nbsp;left:&nbsp;100%; &nbsp;&nbsp;height:&nbsp;20px; &nbsp;&nbsp;width:&nbsp;20px; &nbsp;&nbsp;background:&nbsp;gray; &nbsp;&nbsp;box-sizing:border-box; &nbsp;&nbsp;transform:&nbsp;rotate(45deg)&nbsp;translate(-50%); &nbsp;&nbsp;border-top:&nbsp;inherit; &nbsp;&nbsp;border-right:&nbsp;inherit; &nbsp;&nbsp;box-shadow:&nbsp;inherit; &nbsp;&nbsp;transition:all&nbsp;0.8s;}div:hover:before{ &nbsp;&nbsp;top:80%; &nbsp;&nbsp;}<div>Only&nbsp;Element</div>希望它是一个不同的三角形形状？div&nbsp;{ &nbsp;&nbsp;height:&nbsp;100px; &nbsp;&nbsp;width:&nbsp;200px; &nbsp;&nbsp;background:&nbsp;gray; &nbsp;&nbsp;position:&nbsp;relative; &nbsp;&nbsp;cursor:&nbsp;pointer; &nbsp;&nbsp;border-radius:&nbsp;10px;}div:before&nbsp;{ &nbsp;&nbsp;content:&nbsp;""; &nbsp;&nbsp;position:&nbsp;absolute; &nbsp;&nbsp;top:&nbsp;70%; &nbsp;&nbsp;left:&nbsp;100%; &nbsp;&nbsp;height:&nbsp;20px; &nbsp;&nbsp;width:&nbsp;20px; &nbsp;&nbsp;background:&nbsp;gray; &nbsp;&nbsp;box-sizing:border-box; &nbsp;&nbsp;transform:&nbsp;&nbsp;translate(-50%)&nbsp;skewX(45deg); &nbsp;&nbsp;box-shadow:&nbsp;inherit; &nbsp;&nbsp;transition:all&nbsp;0.8s; &nbsp;&nbsp;z-index:-1;}div:hover:before{ &nbsp;&nbsp;transform:&nbsp;&nbsp;translate(-50%); &nbsp;&nbsp;border-radius:50%; &nbsp;&nbsp;top:20%; &nbsp;&nbsp;}<div>Only&nbsp;Element</div>