css - 带箭头的讲话泡泡

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>

这目前没有通过 HitTest ，因为透明边框也是可点击的。
目标

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

我需要在各种内容(图像、渐变、文本......)上显示形状，

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

有能力围绕对话气泡移动三 Angular 形 根据它所指的元素的位置(顶部/左侧/右侧/底部)

需要强调时在其周围添加边框或框阴影

有没有办法解决这些问题？

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>

HitTest
为了创建您的“ HitTest ”，您可能希望使用旋转元素而不是边框​​ hack。
就像是:

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>

只有当正方形或主要元素悬停时才会显示指针。
但是等一下，这会打乱定位吗？你怎么能处理呢？
有几个解决方案。其中之一是使用 calc CSS 属性。

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>

把它们放在一起
您还可以使用border-radius 属性再次为您的消息框或语音气泡添加边框半径:

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>

这甚至可以让您不仅创建一个三 Angular 形，还可以创建一个圆形呢？

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-index 来解决此问题。
不喜欢使用“魔数(Magic Number)”？
如果您不喜欢使用 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>

想要它是不同形状的三 Angular 形吗？

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>