Create a comic balloon-like div

Asked

Viewed 4,578 times

4

How can I create a div with the appearance of a comic balloon (I don’t know if this is the best expression).

Goal:

objetivo

Reality:

como está ficando

*Please ignore fonts and colors in question, the focus is tip of the div.

Follows the code in Jsfiddle:

html css css3

3 answers

8

Version CSS3

HTML

<div class="balao">Oi!</div>

CSS

.balao {
    float:left;
    background-color:#39c;
    border-top:10px solid #39c;
    border-left:10px solid transparent;
    background-clip: padding-box;
    padding: 0 10px 10px 10px;
}

See working on JS Fiddle


Version CSS2

HTML

<div class="balao">Oi!</div>

CSS

.balao {
    float:left;
    background-color:#39c;
    border-top:10px solid #39c;
    border-left:10px solid #eee; /* Usar mesma cor do fundo*/
    padding: 0 10px 10px 10px;
}

See working on JS Fiddle

  • or transparent ;)

  • IE7+ I know it works. Know some other problem?

  • Thank you very much! before the project the solution would work, thanks

  • @Beetroot with CSS3 can be used transparent, but it needs to background-clip: padding-box;. I put a CSS3 version to use your suggestion.

  • Really excellent @Bacco ! I’m just still trying to figure out how the border-left created just that little strip, and didn’t put the whole edge vertically.

  • @Allanramos looks at this version for easy viewing: http://jsfiddle.net/Bacco/7egdpw0g/5/ - only has edge on top and left, that was the "trick".

Show 1 more comment

1


Another example here: 

.content_ballon{
    background: #37688D;
    height: 50px;
    width: 100px;
    position: relative;
    margin-left: 9px;
    color: #fff;
    padding: 3px 5px;
}

.ballon img{
    position: absolute;
}

jsFiddle

There you move the class "Ballon" to where you want.

  • Thanks man! That’s exactly what I was looking for thanks XD

  • No reason, we’re here to help.

  • 1

    Tooltip for generating Speech Bubbles in CSS: http://www.ilikepixels.co.uk/drop/bubbler/

  • 1

    Cool this heim @Onosendai, did not know yet. Thanks!

1

Another way of doing:

.balao {
    background:blue;
    position:relative;
}
.balao:before {
    content:'';
    position:absolute;
    left:-10px;
    top:0;
    border-bottom: 10px solid transparent;
    border-right:10px solid blue;
}

Full example: FIDDLE

  • Thank you extremely useful and without the need to use image or create another element, worth XD

Browser other questions tagged html css css3

You are not signed in. Login or sign up in order to post.