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:

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

And here is the CSS:

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

Hi, I'm Erik, an engineer from Barcelona. If you like the post or have any comments, say hi.