html - 在文字后面显示聊天气泡

我想在某些文本后面显示一个聊天气泡。本质上，问题归结为适当缩放背景图像。

我主要是一名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>

最佳答案

您可以只使用普通的旧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/