显示文本背后的聊天泡泡

Question

我想在某些文字后面显示聊天气泡。基本上问题归结为正确缩放背景图像。

我主要是Android开发人员，使用.9图像很容易。我希望能够为HTML页面做同样的事情。

我想要的是创建一个图像，我可以指定哪些部分拉伸，哪些不。这样我就可以最好地将图像缩放为背景。

目前我的尝试看起来像这样。

这是我的代码。

<div style="background-image: url(../home_images/chat_right.png);background-size: 100% 100%; background-repeat:no-repeat;"><em>&ldquo;What RiteCare has done for my child is an amazing gift. Watching him grow in front of my eyes has been so incredible.&rdquo; </em>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ~Margaret</div>

Answer 1

你可以使用普通的旧CSS。没有理由拉伸和歪斜图像。

<div class="chatBubble">
<div class="message">
And then, this one time, at band camp....
</div>
</div>
<div class="triangle-down">
</div>

适用的CSS：

.message {
  color: #000;
  font-size:14pt;
  font-weight:bold;
  text-align:left;
}

.chatBubble {
  border: 5px solid purple;
  border-radius:10px;
  background-color:white;
  padding:15px;
}
.triangle-down {
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 20px solid purple;
  position:relative;
  float:right;
  right:10%;
}

此处示例：

https://jsfiddle.net/fh5gg77r/