Bubbles o burbujas con CSS

burbujas con css

by JavaFace

HTML

<div class='container'>
<div class="content">
			<h2>ESTILOS BURBUJA IDEAL PARA DARLE UN EFECTO ORIGINAL A TU SITIO</h2>
			<p class="triangle-isosceles">Visita javaface-elblogdelprogramador.com</p>
			<p class="triangle-isosceles top">Visita javaface-elblogdelprogramador.com</p>
			<p class="triangle-isosceles left">Visita javaface-elblogdelprogramador.com</p>
			<p class="triangle-isosceles right">Visita javaface-elblogdelprogramador.com</p>
			<p class="triangle-right">Visita javaface-elblogdelprogramador.com</p>
			<p class="triangle-right top">Visita javaface-elblogdelprogramador.com</p>
			<p class="triangle-right left">Visita javaface-elblogdelprogramador.com</p>
			<p class="triangle-right right">Visita javaface-elblogdelprogramador.com</p>
			<p class="triangle-obtuse">Visita javaface-elblogdelprogramador.com</p>
			<p class="triangle-obtuse top">Visita javaface-elblogdelprogramador.com</p>
			<p class="triangle-obtuse left">Visita javaface-elblogdelprogramador.com</p>
			<p class="triangle-obtuse right">Visita javaface-elblogdelprogramador.com</p>
			<p class="triangle-border">Visita javaface-elblogdelprogramador.com</p>
			<p class="triangle-border top">Visita javaface-elblogdelprogramador.com</p>
			<p class="triangle-border left">Visita javaface-elblogdelprogramador.com</p>
			<p class="triangle-border right">Visita javaface-elblogdelprogramador.com</p>
			
			
			<h2>Ejemplos Comentarios</h2>
			
			<h3 class="example-commentheading">125 Comentarios</h3>
			
			<blockquote class="example-right">
				<p>Hello tu pagina web no me deja compiar el codigo fuente ,ayudame por favor</p>
			</blockquote>
			<p>Ivan dandoCopia</p>
			
			<blockquote class="example-obtuse">
				<p>Trata de Hacer CTRL-C</p>
			</blockquote>
			<p>Henry EliAstuto</p>
            
			<p>El Chapulin colorado</p>
			<blockquote class="example-twitter" >
				<p>Y ahora quien podra ayudame!!</p>
			</blockquote>
			

			<div class="example-number">57</div>


			<h2>MAS EJEMPLOS CON...

CSS

#container {
    width:500px; 
    padding:0 0 50px; 
    margin:0 auto;
}
.content {
    position:relative;
    z-index:1;
}

.content h2 {
    margin:2em 0 0.75em; 
    font-size:2em; 
    font-weight:bold; 
    font-style:normal; 
    text-align:left;
}
.triangle-isosceles {
	position:relative;
	padding:15px;
	margin:1em 0 3em;
	color:#000;
	background:#f3961c; /* default background for browsers without gradient support */
	/* css3 */
	background:-webkit-gradient(linear, 0 0, 0 100%, from(#f9d835), to(#f3961c));
	background:-moz-linear-gradient(#f9d835, #f3961c);
	background:-o-linear-gradient(#f9d835, #f3961c);
	background:linear-gradient(#f9d835, #f3961c);
	-webkit-border-radius:10px;
	-moz-border-radius:10px;
	border-radius:10px;
}

/* Variant : for top positioned triangle
------------------------------------------ */

.triangle-isosceles.top {
	background:-webkit-gradient(linear, 0 0, 0 100%, from(#f3961c), to(#f9d835));
	background:-moz-linear-gradient(#f3961c, #f9d835);
	background:-o-linear-gradient(#f3961c, #f9d835);
	background:linear-gradient(#f3961c, #f9d835);
}

/* Variant : for left/right positioned triangle
------------------------------------------ */

.triangle-isosceles.left {
	margin-left:50px;
	background:#f3961c;
}

/* Variant : for right positioned triangle
------------------------------------------ */

.triangle-isosceles.right {
	margin-right:50px;
	background:#f3961c;
}

/* THE TRIANGLE
------------------------------------------------------------------------------------------------------------------------------- */

/* creates triangle */
.triangle-isosceles:after {
	content:"";
	position:absolute;
	bottom:-15px; /* value = - border-top-width - border-bottom-width */
	left:50px; /* controls horizontal position */
	border-width:15px 15px 0; /* vary these values to change the angle of the vertex */
	border-style:solid;
	border-color:#f3961c transparent;
    /* reduce the damage in FF3.0 */
    display:block; 
    width:0;
}

/* Variant :...