<div class="container">
<div class="message-bubble">
<p>Some message here and so on lorem ipsum dolor shit ...</p>
</div>
</div>
body {
margin: 0;
height: 100vh;
}
.container {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.message-bubble {
background: lightgrey;
text-align: center;
height: 120px;
width: 200px;
padding: 12px;
box-sizing: border-box;
display: flex;
align-items: center;
border-radius: 10px;
border-bottom-right-radius: 0;
position: relative;
}
.message-bubble:after {
content: ' ';
position: absolute;
width: 0;
height: 0;
border-style: solid;
border-width: 30px 0 0 30px;
border-color: transparent transparent transparent lightgrey;
bottom: 0;
right: -20px;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.