8

Gostaria de saber algumas alternativas pra utilizar alguns button's customizados e também o famoso balão de texto. Atualmente eu uso uma <div id="container-button"></div> que dentro tem o <span id="texto"></span> e uma borda <span id="borda"></span>. Atualmente faço o desenho de um triângulo com o elemento #borda usando a propriedade border com uma cor transparent. Porém, acho bem custoso :'(

O objetivo é chegar nestes desenhos:

inserir a descrição da imagem aqui

Como os tamanhos destes desenhos variam muito de acordo com o texto que há dentro dele, acredito que seja ruim usar background-image (ou não).

Como vocês implementam esses desenhos usando css?

1 Resposta 1

9

Existe em pequeno "truque" usando as bordas no CSS o que nos permite fazer bordas triangulares.

Eu pessoalmente insiro essas bordas com :after ou :before.

Aqui vai um exemplo de como eu faria seus exemplos usando o que falei

HTML

Aqui criamos o nosso HTML, com duas divs para simular os balões de dialogo

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

CSS

E aqui vai a estilização necessária para eles

.balao{
    background: #000;
    border-radius: 0 30px 30px 0;
    width: 300px;
    height: 100px;

    /* Position relative para a seta não exceder os limites do balão, já que vamos usar position absolute nele */
    position: relative;

    margin-bottom: 1em;
}
.balao:after{
    /* content necessário para a criação de um elemento vazio */
    content: "";

    width: 0; 
    height: 0;

    /* position: absolute para manipularmos a posição da seta */
    position: absolute;

    /* Right com valor negativo para ele ficar para fora do balão de dialogo */
    right: -32px;

    /* E aqui o truque com as bordas */
    /* 50px é a metade da altura do elemento, assim temos uma seta da mesma altura que nosso elemento */
    border-top: 50px solid transparent;
    border-bottom: 50px solid transparent;
    border-left: 50px solid #000;

    border-radius: 50%;

}
.balao2{
    background: #000;
    border-radius: 15px;
    width: 300px;
    height: 100px;

    position: relative;
}
.balao2:after{

    content: "";

    width: 0;
    height: 0;

    position: absolute;

    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-top: 20px solid #000;

    bottom: -20px;
    left: 20%;
}

Segue o exemplo no JSFiddle: http://jsfiddle.net/Wagner/m0qyayf7

.balao {
  background: #000;
  border-radius: 0 30px 30px 0;
  width: 300px;
  height: 100px;
  /* Position relative para a seta não exceder os limites do balão, já que vamos usar position absolute nele */
  position: relative;
  margin-bottom: 1em;
}

.balao:after {
  /* content necessário para a criação de um elemento vazio */
  content: "";
  width: 0;
  height: 0;
  /* position: absolute para manipularmos a posição da seta */
  position: absolute;
  /* Right com valor negativo para ele ficar para fora do balão de dialogo */
  right: -32px;
  /* E aqui o truque com as bordas */
  /* 50px é a metade da altura do elemento, assim temos uma seta da mesma altura que nosso elemento */
  border-top: 50px solid transparent;
  border-bottom: 50px solid transparent;
  border-left: 50px solid #000;
  border-radius: 50%;
}

.balao2 {
  background: #000;
  border-radius: 15px;
  width: 300px;
  height: 100px;
  position: relative;
}

.balao2:after {
  content: "";
  width: 0;
  height: 0;
  position: absolute;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-top: 20px solid #000;
  bottom: -20px;
  left: 20%;
}
<div class="balao"></div>
<div class="balao2"></div>

Existem exemplos bem completos pela internet, e inclusive geradores automáticos para isso, basta fazer uma busca no Google por "css triangles"

2

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .