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 :
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 :
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;
}
Then you move the ballon class to wherever you want.
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
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
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