带箭头的语音气泡

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: left: right:和bottom:CSS属性，以便根据主元素进行定位。如下所示：

.oneAndOnlyDiv {

  height: 100px;

  width: 200px;

  border: 3px solid gray;

  background: lightgray;

  position: relative;

}

.oneAndOnlyDiv:before {

  content: "";

  position: absolute;

  top: 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>

命中测试

为了创建您的“命中测试”，您可能希望使用一个旋转元素，而不是边框黑客。

类似于：

div {
  height: 100px;
  width: 200px;
  background: gray;
  position: relative;
  cursor:pointer;}div:before {
  content: "";
  position: absolute;
  top: 100%;
  left: 20px;
  height: 20px;
  width: 20px;
  background: black;
  transform: rotate(45deg);
  transform-origin:top right;}

<div>Only element</div>

或者使用扭曲的伪元素：

div {
  height: 100px;
  width: 200px;
  background: gray;
  position: relative;
  cursor:pointer;}div:before {
  content: "";
  position: absolute;
  top: 90%;
  left: 20px;
  height: 30%;
  width: 20px;
  background: black;
  transform: skewY(-45deg);
  transform-origin:bottom left;
  z-index:-1;}

<div>Only element</div>

它只在正方形或主元素悬停时显示指针。但等等，那会搞砸定位吗？你怎么能应付得来？

有几个解决办法。其中之一是使用calcCSS属性

div {
  height: 100px;
  width: 200px;
  background: gray;
  position: relative;
  cursor:pointer;}div:before {
  content: "";
  position: absolute;
  top: -webkit-calc(100% - 10px); /*may require prefix for old browser support*/
  top: calc(100% - 10px); /*i.e. half the height*/
  left: 20px;
  height: 20px;
  width: 20px;
  background: gray;
  transform: rotate(45deg);}

<div>Only element</div>

添加边框

现在可以很容易地添加边框，只需将边界声明添加到主元素，并将border-bottom和border-right的伪元素的inherit

边界

div {
  height: 100px;
  width: 200px;
  background: gray;
  position: relative;
  cursor:pointer;
  border:3px double black;}div:before {
  content: "";
  position: absolute;
  top: -webkit-calc(100% - 10px); /*may require prefix for old browser support*/
  top: calc(100% - 10px); /*i.e. half the height*/
  left: 20px;
  height: 20px;
  width: 20px;
  background: gray;
  transform: rotate(45deg);
  border-bottom:inherit;
  border-right:inherit;
  box-shadow:inherit;}

<div>Only element</div>

方框阴影：

为了有一个盒子阴影，我使用了:after伪元素，以便将方框阴影隐藏在另一个伪元素上，使元素看起来像一个单一元素。

div {
  height: 100px;
  width: 200px;
  background: gray;
  position: relative;
  cursor:pointer;
  box-shadow: 5px 5px 10px 2px black;}div:before,div:after {
  content: "";
  position: absolute;
  top: -webkit-calc(100% - 10px); /*may require prefix for old browser support*/
  top: calc(100% - 10px); /*i.e. half the height*/
  left: 20px;
  height: 20px;
  width: 20px;
  background: gray;
  transform: rotate(45deg);z-index:-1;
  box-shadow:inherit;}div:after{
  box-shadow:none;
  z-index:8;
  }

<div>Only element</div>

把一切都放在一起

还可以使用“边框半径”属性将边框半径再次添加到消息框或语音气泡中：

div {

  height: 100px;

  width: 200px;

  background: gray;

  position: relative;

  cursor:pointer;

  border:3px double black;

  border-radius:10px;

}

div:before {

  content: "";

  position: absolute;

  top: -webkit-calc(100% - 10px); /*may require prefix for old browser support*/

  top: calc(100% - 10px); /*i.e. half the height*/

  left: 20px;

  height: 20px;

  width: 20px;

  background: gray;

  transform: rotate(45deg);

  border-bottom:inherit;

  border-right:inherit;

  box-shadow:inherit;

}

<div>Only element</div>

这甚至允许你不仅创建一个三角形，还可以用一个圆来代替它吗？

div {
  height: 100px;
  width: 200px;
  background: gray;
  position: relative;
  cursor:pointer;
  border:3px double black;
  border-radius:10px;}div:before {
  content: "";
  position: absolute;
  top: -webkit-calc(100% - 13px); /*may require prefix for old browser support*/
  top: calc(100% - 13px); /*i.e. half the height + border*/
  left: 20px;
  height: 20px;
  width: 20px;
  background: gray;
  transform: rotate(45deg);
  border:3px double transparent;
  border-bottom:inherit;
  border-right:inherit;
  box-shadow:inherit;
  border-radius:50%;}

<div>Only element</div>

如果您有内容溢出的问题，并且隐藏在这个伪元素后面，并且您不担心有一个边框，您可以使用一个负的z索引来解决这个问题。

不喜欢用“魔法数字”？

如果您不喜欢使用calc值的想法，其中我的答案中的位置当前正在使用(同时工作)，则可以使用transform:translate(50%)

这将是一个更好的办法，因为：

• 您不需要知道边框的大小，也不需要知道宽度的一半。
• 您将使您的消息框/气泡的定位更加动态，并将支持进一步的大小。

div {

  height: 100px;

  width: 200px;

  background: gray;

  position: relative;

  cursor: pointer;

  border: 3px double black;

  border-radius: 10px;

}

div:before {

  content: "";

  position: absolute;

  top: 100%;

  left: 30px;

  height: 20px;

  width: 20px;

  background: gray;

  box-sizing:border-box;

  transform: rotate(45deg) translate(-50%);

  border-bottom: inherit;

  border-right: inherit;

  box-shadow: inherit;

}

<div>Only element</div>

想移动它吗？你可以的!

div {
  height: 100px;
  width: 200px;
  background: gray;
  position: relative;
  cursor: pointer;
  border: 3px double black;
  border-radius: 10px;}div:before {
  content: "";
  position: absolute;
  top: 100%;
  left: 10%;
  height: 20px;
  width: 20px;
  background: gray;
  box-sizing: border-box;
  transform: rotate(45deg) translate(-50%);
  border-bottom: inherit;
  border-right: inherit;
  box-shadow: inherit;
  transition: all 0.8s;}div:hover:before {
  left: 90%;}

<div>Only element</div>

想要一个对吗？

div {
  height: 100px;
  width: 200px;
  background: gray;
  position: relative;
  cursor: pointer;
  border: 3px double black;
  border-radius: 10px;}div:before {
  content: "";
  position: absolute;
  top: 15%;
  left: 100%;
  height: 20px;
  width: 20px;
  background: gray;
  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>Only Element</div>

希望它是一个不同的三角形形状？

div {
  height: 100px;
  width: 200px;
  background: gray;
  position: relative;
  cursor: pointer;
  border-radius: 10px;}div:before {
  content: "";
  position: absolute;
  top: 70%;
  left: 100%;
  height: 20px;
  width: 20px;
  background: gray;
  box-sizing:border-box;
  transform:  translate(-50%) skewX(45deg);
  box-shadow: inherit;
  transition:all 0.8s;
  z-index:-1;}div:hover:before{
  transform:  translate(-50%);
  border-radius:50%;
  top:20%;
  }

<div>Only Element</div>