CSS Speech bubbles

kbarg · Feb 21st 2019

I want to put speech bubbles on my forum theme inside of threads and posts, where the speech bubble points towards the avatar. I was curious how i could do this.

Included in this thread is a crappy drawing done on paint to show you what I want :p. Sorry for the crappy photo

Hitman · Feb 21st 2019

As an example, this time you can try

Maybe it'll help you.

Code

@include screen-md-up {
.messageHeader::before {
content: '';
position: absolute;
border-style: solid;
border-width: 30px 30px 30px 0;
border-color: transparent #000;
display: block;
width: 0;
z-index: 0;
left: 240px;
top: 15px;
}
.messageHeader::after {
content: '';
position: absolute;
border-style: solid;
border-width: 30px 30px 30px 0;
border-color: transparent #FFFFFF;
display: block;
width: 0;
z-index: 1;
left: 241px;
top: 15px;
}
.messageSidebar + .messageContent {
border-radius: 3px;
padding: 10px;
}
.messageSidebar {
border: 1px solid #000;
}
}

Display More

kbarg · Feb 21st 2019

When I get off work I will try it and report back my results. Thanks

Share