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