如何在左侧站点上制作带有三角形的响应气泡

Question

我尝试制作一个无论在用户设备上都能响应的气泡，并且它在左侧站点上有一个三角形。

它应该是这样的：

我尝试了什么：

HTML：

.responsive-bubble {
  position: relative;
  display: inline-block;
  max-width: 80%;
  min-width: 80%;
  min-height: 1.5em;
  padding: 20px;
  background: #ebebeb;
  border: #ebebeb solid 4px;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 0px;
  border-style: solid;
  float: right;
}
.responsive-bubble:before {
  content: "";
  position: absolute;
  bottom: calc(89% - 3px);
  left: calc(-4% - 3px);
  border-style: solid;
  border-width: 18px 18px 0;
  border-color: #7F7F7F transparent;
  display: block;
  width: 0;
  z-index: 0;
}

<div class="responsive-bubble">“And here comes some really long text which doesnt mean anything however it have to be long to provide a lot of characters and see how this buble works when long text is here and even when nearly no text is here and so on. I hope you know what I mean
  So i am adding few additional words! So i am adding few additional words! So i am adding few additional words!”</div>
<div class="responsive-bubble">“Some shorter text come here to see how it looks when it's not so many text HERE! Some shorter text come here to see how it looks when it's not so many text HERE!”</div>
<div class="responsive-bubble">“Some shorter text come here to see how it looks when it's not so many text HERE!”</div>

什么不起作用：
看起来它自己的气泡响应正确，但是我在左侧站点的三角形有问题，它不是在正确的位置取决于气泡。

演示：
对于演示，我更改了边框等只是为了提供更多详细信息： https://jsfiddle.net/jkdurdjr/2/

这里有谁能告诉我我做错了什么吗？

Answer 1

我在 cmets 中链接的问题对于您的情况来说有点过于复杂，需要对其进行大量调整以适应您的情况。对于您的情况，有一个更简单的解决方案，所以我单独添加它。

这里根本不需要使用calc 函数来定位箭头。所需要的只是根据箭头及其父项的尺寸相对于top 和left 定位箭头。将top 设置为-4px，其中需要-4px 才能将元素向上移动。像素等于其父级的border-top。通常，当添加子代时，它位于父代的border 下方，因此我们需要对其进行偏移。同样，父级的左边框也需要进行偏移 + 整个箭头需要可见，因此我们将其向左偏移-22px，这不过是(size of the arrow (it's border width) + the left border of parent) * -1。

.responsive-bubble {
  position: relative;
  display: inline-block;
  max-width: 80%;
  min-width: 80%;
  min-height: 1.5em;
  padding: 20px;
  background: #ebebeb;
  border: #ebebeb solid 4px;
  border-radius: 5px;
  border-color: #ebebeb;
  border-style: solid;
  float: right;
  margin-bottom: 10px;
}
.responsive-bubble:before {
  content: "";
  position: absolute;
  top: -4px;  /* just set it w.r.t to top, where the value is negative of border-top */
  left: -22px;  /* this needs to be inverse of border-width of this element + border-left of parent */
  border-style: solid;
  border-width: 18px 18px 0;
  border-color: #ebebeb transparent;
  display: block;
  width: 0;
  z-index: 0;
}

<div class="responsive-bubble">“And here comes some really long text which doesnt mean anything however it have to be long to provide a lot of characters and see how this buble works when long text is here and even when nearly no text is here and so on. I hope you know what I mean
  So i am adding few additional words! So i am adding few additional words! So i am adding few additional words!”</div>
<div class="responsive-bubble">“Some shorter text come here to see how it looks when it's not so many text HERE! Some shorter text come here to see how it looks when it's not so many text HERE!”</div>
<div class="responsive-bubble">“Some shorter text come here to see how it looks when it's not so many text HERE!”</div>

Answer 2

我更改了您的 CSS 样式，它看起来与您预期的一样： https://jsfiddle.net/940vaade/

主要区别在于bottom 和left 属性。它们基于您的三角形尺寸（border-width 属性）。

请注意，我更改了宽度和高度（它们的单位是 em，而不是 px）。此外，在您的 CSS 中，.responsive-bubble 的边框半径具有不同的值（带前缀的 20px，不带前缀的 0px）。

Answer 3

你很亲密，我把border-width换成了top，把bottom换成了top

.responsive-bubble:before {
    content: "";
    position: absolute;
    top:0;                // relative to top, not to the bottom
    left: calc(-4% - 3px);
    border-style: solid;
    border-width: 25px 0 0 25px;  // second 0 referrs to the right side, 3rd to the top
    border-color: #7F7F7F transparent;
    display: block;
    width: 0;
    z-index: 0;
}

小提琴：https://jsfiddle.net/jkdurdjr/9/