html - 一个 div 旁边的形状

Question

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

我已经完成了对话泡泡，但我不知道如何将蓝点精确定位到对话泡泡高度的 50%（对话泡泡的高度可以变化）和左边 10 像素。

这是我开始的 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;
}

Answer 1

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

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

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

Answer 2

您可以使用显示表，试试这个：

demo

HTML

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

css

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

Answer 3

最好将组放在一个容器中，这样您就可以轻松地控制该容器内每个元素的位置。

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

演示：http: //jsfiddle.net/ghpCr/4/