我尝试制作一个气泡，无论用户设备上的气泡如何，气泡都将响应，并且左侧的位置上还有一个三 Angular 形。
它应该是什么样的:
我试过的
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>什么不起作用:
它看起来像气泡，它可以自我正确响应，但是我在左侧部位遇到三 Angular 形问题，取决于气泡是否在正确的位置上。
演示:
对于演示，我更改了边框等，以提供更多详细信息:
https://jsfiddle.net/jkdurdjr/2/
这里有人可以告诉我我在做什么错吗？
最佳答案
我在评论中链接的问题对于您的情况来说有点太复杂了，需要对其进行大量调整以适合您的情况。有一个针对您的案例的简单得多的解决方案，因此我将其单独添加。
完全不需要使用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>关于javascript - 如何在左侧站点上制作带有三 Angular 形的响应气泡，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/34978185/