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

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

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

\n\n

这里根本不需要使用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.

\n\n

\r\n

\r\n

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

\r\n

<div class="responsive-bubble">\xe2\x80\x9cAnd 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\r\n  So i am adding few additional words! So i am adding few additional words! So i am adding few additional words!\xe2\x80\x9d</div>\r\n<div class="responsive-bubble">\xe2\x80\x9cSome 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!\xe2\x80\x9d</div>\r\n<div class="responsive-bubble">\xe2\x80\x9cSome shorter text come here to see how it looks when it\'s not so many text HERE!\xe2\x80\x9d</div>

\r\n

\r\n

\r\n

\n