html - div 旁边的形状

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

我已经完成了对话气泡，但我不知道如何将蓝点精确定位在对话泡泡高度的 50%(对话泡泡的高度可以不同)和它左侧 10px 的位置。

这是我开始的 JSFiddle:http://jsfiddle.net/ghpCr/

HTML:

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

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

<div class="dot"></div>

CSS:

@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');

.container {
    margin-top: 10px;
}

.dot {
  width: 13px;
  height: 13px;
  background-color: #44769d;
  border-radius: 50%;
}

.speech-bubble {
  position: relative;
  min-height: 20px;
  padding: 15px;
  width: 250px;
  margin: 10px 0 10px 18px;
  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;
}

最佳答案

这个想法是将点放在左边的外面，这是通过 right: 100%; 实现的。接下来，您需要将它移得更远一点，因此是 margin-right: 10px; 。现在对于垂直对齐，我们使用类似的方法。

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

另请注意，该点必须是对话气泡的子节点。我在实际标记出现之前发布了这个答案。

关于html - div 旁边的形状，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/17712495/