<div class="bubble">
<div class="bubble-text">
<h1>Bubble info</h1>
<hr>
<p>this is a simple bubble effect <br/>width CSS pseudo element </p>
</div>
</div>
body{font-family: sans-serif; background:#191919;}
.bubble-text{background:#139ee0; color:#fff; padding:7px 15px; border-radius:3px; width:350px;}
.bubble-text::after{
content:"";
border-left:20px solid transparent;
border-right:20px solid transparent;
border-top: 20px solid #139ee0;
position: absolute;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.