Neste tutorial , ensino como criar um balão para conversas, conforme abaixo.

 

 

 

O código é simples, começamos colocando uma classe na div:

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

 

E dentro colocamos o conteúdo:

<style>
.balao{background:#cccccc; padding:15px; position:relative; top:20px; left:120px; width:50%; float:left; }

.balao:before{ content:''; position: absolute; width:20px; height:20px; left:-10px; top:25px; background:#cccccc; -webkit-transform:rotate(45deg); }

</style>
<div class="balao"><b>O que eu faço?</b> Descubro o dia e horas, leio palavras e frases e soletro, falo o abc, conto números, faço operações matemáticas, faço adivinhações, etc... </div>

E isso ai… Até mais

 

Categoria: css, html | Tags: balão, balão diálogo, conteúdos, css, diálogo, falar | Postado por joemaster em 25/jul/2020

Próximo >> Como colocar um fundo de imagem em uma página HTML