Html 在div旁边的形状

我正在尝试重新创建这个：

我已经完成了语音泡泡，但我不知道如何将蓝色圆点精确定位在语音泡泡高度的50%（语音泡泡的高度可能会有所不同）和它左侧的10px

以下是我开始的JSFIDLE：

HTML:

---

其想法是将圆点正好放在左边的外侧，这是通过

right:100%实现的。接下来，您需要将它移得更远一点，因此
marginright:10px。现在，对于垂直对齐，我们使用类似的方法

.dot {
    // ...
    right: 100%; 
    margin-right: 10px; 
    top: 50%; 
    margin-top: -6.5px;
}

还请注意，圆点必须是语音气泡的子对象。我在实际标记出现之前发布了这个答案。
最好将组放在一个容器中，这样您就可以轻松地控制容器中每个元素的位置

<div class="speech-bubble-container">
     <div class="dot"></div>
     <div class="speech-bubble">
         Here's a <br /> bigger bubble.<br/>    
     </div>
</div>


这是一个更大的泡沫。


演示：
您可以使用显示表，请尝试以下操作：


HTML
你的形状总是一样高吗？不，气泡的高度会不同。@Hailwood解释可变高度是不可能的。如果形状有一个可选的高度，
margin-top
可以根据这个高度进行调整，那么形状就需要另一个类。为什么要向下投票？这无疑是将一个元素放置在另一个元素之外一个固定距离的方法。@stefan这是为了传达方法，而不是整个源代码。当然你需要给它一个颜色让它显示出来。。。完整代码包括
位置：绝对（隐式给定
右：…
和
上：…
）和他代码中所有先前的规则。@matt3141你能用你的代码链接到一个工作的JSFIDLE吗？@stefan我当然能。你觉得我的逻辑有什么缺陷吗？没必要。通过将点放在气泡中来降低标记的开销。我们真的认为单个DIV很昂贵吗？见鬼，我们不妨使用
：before
，然后完全去掉
.dot
：before已经被用于构建箭头。添加它将渲染圆，但它将圆绑定到箭头，不允许两者之间存在水平边距。箭头最终与圆圈重叠，无法移动。
：after
也同样有效，但不再具有语义。那也是讽刺。
.dot {
    // ...
    right: 100%; 
    margin-right: 10px; 
    top: 50%; 
    margin-top: -6.5px;
}

<div class="speech-bubble-container">
     <div class="dot"></div>
     <div class="speech-bubble">
         Here's a <br /> bigger bubble.<br/>    
     </div>
</div>

<div class="level1">
 <div class="level2">
  <div class="dot"></div>
  <div class="speech-bubble">
    Sample Text.
  </div>
</div>
</div>

.level1 {
    display: table-row;
}
.level2 {
    display: table-cell;
    overflow:hidden;
    position:relative;
}
.dot {
    width: 13px;
    height: 13px;
    background-color: #44769d;
    border-radius: 50%;
    position:absolute;
    top:42%; /* or use top:50%;margin-top:-6.5px; */
    left:2%;
}

.speech-bubble {
    position: relative;
    min-height: 20px;
    padding: 15px;
    width: 250px;
    margin: 10px 0 10px 20px;
    background-color: #ffffff;
    border: 1px solid #cccccc;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
    -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
}
.speech-bubble:after, .speech-bubble:before {
    position: absolute;
    right: 100%;
    display: inline-block;
    border: solid transparent;
    content:"";
    height: 0;
    width: 0;
    pointer-events: none;
}
.speech-bubble:before {
    border-color: rgba(204, 204, 204, 0);
    border-right-color: #ccc;
    border-width: 9px;
    top: 50%;
    margin-top: -9px;
}
.speech-bubble:after {
    border-color: rgba(255, 255, 255, 0);
    border-right-color: #fff;
    border-width: 8px;
    top: 50%;
    margin-top: -8px;
}