<div class="bubble">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</div>
.bubble {
width: 240px;
padding: 10px;
position: relative;
border-radius: 10px;
background: red;
color: white;
}
.bubble:after {
content: '';
position: absolute;
right: 30px;
bottom: -10px;
width: 0;
height: 0;
border-top : 10px solid red;
border-right : 10px solid transparent;
border-left: 10px solid transparent;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.