Question

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

它应该如何：

我尝试了什么：

HTML：

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

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

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

这里有谁可以告诉我我做错了什么？

Answer 1

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

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

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Answer 2

我改变了你的CSS风格，它看起来像你期望的那样： https://jsfiddle.net/940vaade/

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

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

Answer 3

您非常接近，我更改了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;
}

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

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

3 个答案: