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

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

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

这里根本不需要使用calc函数来定位箭头。所需要的只是根据其尺寸及其父项的尺寸相对于 top 和 left 定位箭头。将 top 设置为 -4px，其中需要 -4px 才能将元素向上移动 no。等于其父项的 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

你很接近，我更改了 border-width 并将 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;
}

fiddle: https://jsfiddle.net/jkdurdjr/9/

Answer 3

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

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

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

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

How to make responsive bubble with triangle on left site

html

javascript

css

css-shapes