Create a comic-balloon-shaped div

Question

Create a comic-balloon-shaped div

Navigation

#1 by (8 votes)
#2 by (1 votes)
#3 by (1 votes)

4

How can I create a% com with comic book-like appearance (I do not know if this is the best expression).

Goal:

Reality:

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

Follow the code in JSFiddle :

html css css3

asked by anonymous 02.10.2014 / 21:36

3 answers

8

CSS3 Version

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 at JS Fiddle

CSS2 Version

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 at JS Fiddle

02.10.2014 / 21:48

1

Another way to do it:

.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

02.10.2014 / 22:15

How to sum the results of an array brought from the database in PHP? How do I store information when I exit an application and recover on next use?

score 1 · Accepted Answer

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

Then you move the ballon class to wherever you want.