Pointed Buttons and Text Balloons

Question

Pointed Buttons and Text Balloons

Navigation

#1 by (8 votes)

8

I'd like to know some alternatives to using some% s of custom% s as well as the famous text balloon. Currently I use a button that inside has <div id="container-button"></div> and a <span id="texto"></span> border. I currently draw a triangle with the element <span id="borda"></span> using the #borda property with a border color. However, I find it very costly: '(

The goal is to get into these drawings:

As the sizes of these drawings vary greatly depending on the text inside it, I think it's bad to use background-image (or not).

How do you implement these drawings using css?

css front-end

asked by anonymous 24.08.2014 / 19:10

1 answer

Family Tree Exercise Working with the JPA + Hibernate cache

score 8 · Accepted Answer

There is a small "trick" using the borders in CSS which allows us to make triangular borders.

I personally insert these borders with :after or :before .

Here is an example of how I would make your examples using what I said

HTML

Here we create our HTML, with two divs to simulate the dialog balloons

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

CSS

And here goes the stylization required for them

.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%;
}

Follow the example in JSFiddle: link

.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>

There are quite complete examples on the internet, and even automatic generators for that, just do a Google search for "css triangles"