Create a simple talk bubble with rounded corners

Hello, this is a talk bubble

To create a talk bubble with a rounded triangle, the trick is to create a square, rotate it 45 degrees (it'll become a triangle) and put it behind a text block:

HTML
<div class = 'TalkBubble'>
    <div class = 'Triangle'></div>
    <div class = 'Text'>Hello, this is a talk bubble</div>
</div>

And here is the CSS:

CSS
.TalkBubble{
    display: flex;
    align-items: center;
}
.Triangle{
    background: gray;
    border-radius: 3px;
    height: 15px;
    margin-right: -8px;
    transform: rotate(45deg);
    width: 15px;
}
.Text{
    background: gray;
    border-radius: 5px;
    padding: 10px;
}