How do you make a talk bubble using css?

Design help General
1

How do you create a talk bubble with an arrow coming out of it? Can you use ::after?

See example css:

<div class="bubble">Talk bubble</div>

.bubble 
{
position: relative;
width: 350px;
height: 120px;
padding: 0px;
background: #FFFFFF;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
}

.bubble:after 
{
content: '';
position: absolute;
border-style: solid;
border-width: 0 15px 15px;
border-color: #000 transparent;
display: block;
width: 0;
z-index: 1;
top: -15px;
left: 46px;
}
1 Like