表示チャットバブルテキストの後ろに

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/