Burbujas con CSS

Algunos ejemplos de burbujas para contener textos, realizadas utilizando sólo CSS3, creados por Nicolas Gallagher. La página con demos tiene muchos más y el archivo de estilo que contiene las definiciones tiene muchos comentarios que las explican.

Duis quis urna nunc, sit amet tincidunt lectus.

Duis quis urna nunc, sit amet tincidunt lectus.

Duis quis urna nunc, sit amet tincidunt lectus.

.triangle-border {
  background: #FFF;
  border: 5px solid #5A8F00;
  color: #333;
  margin: 1em 0 3em;
  padding: 15px;
  position: relative;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
}
.triangle-border:before {
  border: 20px solid transparent;
  border-top-color: #5A8F00;
  bottom: -40px;
  content: "\00a0";
  display: block;
  height: 0;
  left: 40px;
  position: absolute;
  width: 0;
}
.triangle-border:after {
  border: 13px solid transparent;
  border-top-color: #FFF;
  bottom: -26px;
  content: "\00a0";
  display: block;
  left: 47px;
  position: absolute;
  height: 0;
  width: 0;
}

.triangle-border.top:before {
  border: 20px solid transparent;
  border-bottom-color:#5A8F00;
  bottom: auto;
  left: auto;
  right: 40px;
  top: -40px;
}
.triangle-border.top:after {
  border: 13px solid transparent;
  border-bottom-color:#FFF;
  bottom: auto;
  left: auto;
  right:47px;
  top: -26px;
}

.triangle-border.left {
  margin-left: 30px;
}
.triangle-border.left:before {
  border-width: 15px 30px;
  border-style: solid;
  border-color: transparent #5A8F00 transparent transparent;
  bottom: auto;
  left: -60px;
  top: 10px;
}
.triangle-border.left:after {
  border-width: 9px 21px;
  border-style: solid;
  border-color: transparent #FFF transparent transparent;
  bottom: auto;
  left: -42px;
  top: 16px;
}

Nulla quis eros dolor, eget tincidunt velit. Nam ultrices magna vitae eros accumsan vestibulum. Morbi quis dui ac justo volutpat sagittis a eget sapien.

.example-right {
  background: #5A8F00;
  background: -moz-linear-gradient(top, #b8db29, #5A8F00);
  background: -o-linear-gradient(top, #b8db29, #5A8F00);
  background: linear-gradient(top, #b8db29, #5A8F00);
  border-radius: 10px;
  color: #FFF;
  margin: 0;
  padding: 15px 30px;
  position: relative;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
}
.example-right + p {
  margin: 15px 0 2em 85px;
  font-style: italic;
}
.example-right:after {
  border-width: 0 20px 50px 0px;
  border-style: solid;
  border-color: transparent #5a8f00;
  bottom: -50px;
  content: "\00a0";
  display: block;
  left: 50px;
  height: 0;
  position: absolute;
  width: 0;
}

Aliquam scelerisque cursus ante, et lobortis orci elementum in. In commodo ipsum nec leo malesuada aliquet.

.oval-thought-border {
  background: #FFF;
  border:10px solid  #C81E2B;
  color: #333;
  margin: 1em auto 80px;
  padding: 70px 30px;
  position: relative;
  text-align:center;
  -webkit-border-top-left-radius: 240px 140px;
  -webkit-border-top-right-radius: 240px 140px;
  -webkit-border-bottom-right-radius: 240px 140px;
  -webkit-border-bottom-left-radius: 240px 140px;
  -moz-border-radius: 240px / 140px;
  border-radius: 240px / 140px;
}
.oval-thought-border:before {
  background: #FFF;
  border: 10px solid #C81E2B;
  bottom: -40px;
  content: "\00a0";
  height: 50px;
  position: absolute;
  right: 100px;
  width: 50px;
  z-index: 10;
  -moz-border-radius: 50px;
  -webkit-border-radius: 50px;
  border-radius: 50px;
}
.oval-thought-border:after {
  background: #FFF;
  border: 10px solid #C81E2B;
  bottom: -60px;
  content: "\00a0";
  height: 25px;
  position: absolute;
  right: 50px;
  width: 25px;
  z-index: 10;
  -moz-border-radius: 25px;
  -webkit-border-radius: 25px;
  border-radius: 25px;
}