kzrl/css3-speech-bubble.html

## css3-speech-bubble.html
<html>
<head>
</head>
<body>

<style>
/* ============================================================================================================================
== BUBBLE WITH A BORDER AND TRIANGLE
** ============================================================================================================================ */

/* THE SPEECH BUBBLE
------------------------------------------------------------------------------------------------------------------------------- */

.triangle-border {
  width: 270px;
	position:relative;
	padding:15px;
	margin:1em 0 3em;
	border:4px solid #33c5f4;
	color:#333;
	background:#fff;
	/* css3 */
	-webkit-border-radius:0px;
	-moz-border-radius:0px;
	border-radius:0px;
}

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

.triangle-border.left {
	margin-left:30px;
}

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

.triangle-border.right {
	margin-right:30px;
}

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

.triangle-border:before {
	content:"";
	position:absolute;
	bottom:-20px; /* value = - border-top-width - border-bottom-width */
	left:40px; /* controls horizontal position */
    border-width:20px 20px 0;
	border-style:solid;
    border-color:#33c5f4 transparent;
    /* reduce the damage in FF3.0 */
    display:block;
    width:0;
}

/* creates the smaller  triangle */
.triangle-border:after {
	content:"";
	position:absolute;
	bottom:-13px; /* value = - border-top-width - border-bottom-width */
	left:47px; /* value = (:before left) + (:before border-left) - (:after border-left) */
	border-width:13px 13px 0;
	border-style:solid;
	border-color:#fff transparent;
    /* reduce the damage in FF3.0 */
    display:block;
    width:0;
}

/* Variant : top
------------------------------------------ */

/* creates the larger triangle */
.triangle-border.top:before {
	top:-20px; /* value = - border-top-width - border-bottom-width */
	bottom:auto;
	left:auto;
	right:40px; /* controls horizontal position */
    border-width:0 20px 20px;
}

/* creates the smaller  triangle */
.triangle-border.top:after {
	top:-13px; /* value = - border-top-width - border-bottom-width */
	bottom:auto;
	left:auto;
	right:47px; /* value = (:before right) + (:before border-right) - (:after border-right) */
    border-width:0 13px 13px;
}

/* Variant : left
------------------------------------------ */

/* creates the larger triangle */
.triangle-border.left:before {
	top:10px; /* controls vertical position */
	bottom:auto;
	left:-30px; /* value = - border-left-width - border-right-width */
	border-width:15px 30px 15px 0;
	border-color:transparent #5a8f00;
}

/* creates the smaller  triangle */
.triangle-border.left:after {
	top:16px; /* value = (:before top) + (:before border-top) - (:after border-top) */
	bottom:auto;
	left:-21px; /* value = - border-left-width - border-right-width */
	border-width:9px 21px 9px 0;
	border-color:transparent #fff;
}

/* Variant : right
------------------------------------------ */

/* creates the larger triangle */
.triangle-border.right:before {
	top:10px; /* controls vertical position */
	bottom:auto;
    left:auto;
	right:-30px; /* value = - border-left-width - border-right-width */
	border-width:15px 0 15px 30px;
	border-color:transparent #5a8f00;
}

/* creates the smaller  triangle */
.triangle-border.right:after {
	top:16px; /* value = (:before top) + (:before border-top) - (:after border-top) */
	bottom:auto;
    left:auto;
	right:-21px; /* value = - border-left-width - border-right-width */
	border-width:9px 0 9px 21px;
	border-color:transparent #fff;
}

</style>


<div class="triangle-border">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce est lectus, rhoncus id suscipit ac, fringilla vulputate odio. Suspendisse sagittis eros eu orci vehicula eleifend congue risus pretium. Donec sodales, sem non elementum varius, arcu tortor aliquam diam, euismod suscipit lacus arcu posuere justo. Phasellus euismod nisl at est fringilla ac dictum purus feugiat. In euismod pulvinar auctor. In bibendum, nibh in tristique fringilla, lorem tortor fermentum ipsum, vel vestibulum dolor est ut risus. Cras quis risus eu tellus vulputate consectetur ut tempor orci. Nulla accumsan felis in dolor tincidunt et adipiscing justo commodo. Vivamus tempor ante ac lacus tempor semper. Sed nec ante nulla, non placerat ipsum. Nunc ut erat sit amet elit commodo semper. Fusce eu lectus at velit cursus placerat at ac nibh. Donec venenatis, mi condimentum lacinia feugiat,
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce est lectus, rhoncus id suscipit ac, fringilla vulputate odio. Suspendisse sagittis eros eu orci vehicula eleifend congue risus pretium. Donec sodales, sem non elementum varius, arcu tortor aliquam diam, euismod suscipit lacus arcu posuere justo. Phasellus euismod nisl at est fringilla ac dictum purus feugiat. In euismod pulvinar auctor. In bibendum, nibh in tristique fringilla, lorem tortor fermentum ipsum, vel vestibulum dolor est ut risus. Cras quis risus eu tellus vulputate consectetur ut tempor orci. Nulla accumsan felis in dolor tincidunt et adipiscing justo commodo. Vivamus tempor ante ac lacus tempor semper. Sed nec ante nulla, non placerat ipsum. Nunc ut erat sit amet elit commodo semper. Fusce eu lectus at velit cursus placerat at ac nibh. Donec venenatis, mi condimentum lacinia feugiat,
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce est lectus, rhoncus id suscipit ac, fringilla vulputate odio. Suspendisse sagittis eros eu orci vehicula eleifend congue risus pretium. Donec sodales, sem non elementum varius, arcu tortor aliquam diam, euismod suscipit lacus arcu posuere justo. Phasellus euismod nisl at est fringilla ac dictum purus feugiat. In euismod pulvinar auctor. In bibendum, nibh in tristique fringilla, lorem tortor fermentum ipsum, vel vestibulum dolor est ut risus. Cras quis risus eu tellus vulputate consectetur ut tempor orci. Nulla accumsan felis in dolor tincidunt et adipiscing justo commodo. Vivamus tempor ante ac lacus tempor semper. Sed nec ante nulla, non placerat ipsum. Nunc ut erat sit amet elit commodo semper. Fusce eu lectus at velit cursus placerat at ac nibh. Donec venenatis, mi condimentum lacinia feugiat,
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce est lectus, rhoncus id suscipit ac, fringilla vulputate odio. Suspendisse sagittis eros eu orci vehicula eleifend congue risus pretium. Donec sodales, sem non elementum varius, arcu tortor aliquam diam, euismod suscipit lacus arcu posuere justo. Phasellus euismod nisl at est fringilla ac dictum purus feugiat. In euismod pulvinar auctor. In bibendum, nibh in tristique fringilla, lorem tortor fermentum ipsum, vel vestibulum dolor est ut risus. Cras quis risus eu tellus vulputate consectetur ut tempor orci. Nulla accumsan felis in dolor tincidunt et adipiscing justo commodo. Vivamus tempor ante ac lacus tempor semper. Sed nec ante nulla, non placerat ipsum. Nunc ut erat sit amet elit commodo semper. Fusce eu lectus at velit cursus placerat at ac nibh. Donec venenatis, mi condimentum lacinia feugiat,
arcu elit interdum dui, non volutpat turpis magna nec augue.
arcu elit interdum dui, non volutpat turpis magna nec augue.
arcu elit interdum dui, non volutpat turpis magna nec augue.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce est lectus, rhoncus id suscipit ac, fringilla vulputate odio. Suspendisse sagittis eros eu orci vehicula eleifend congue risus pretium. Donec sodales, sem non elementum varius, arcu tortor aliquam diam, euismod suscipit lacus arcu posuere justo. Phasellus euismod nisl at est fringilla ac dictum purus feugiat. In euismod pulvinar auctor. In bibendum, nibh in tristique fringilla, lorem tortor fermentum ipsum, vel vestibulum dolor est ut risus. Cras quis risus eu tellus vulputate consectetur ut tempor orci. Nulla accumsan felis in dolor tincidunt et adipiscing justo commodo. Vivamus tempor ante ac lacus tempor semper. Sed nec ante nulla, non placerat ipsum. Nunc ut erat sit amet elit commodo semper. Fusce eu lectus at velit cursus placerat at ac nibh. Donec venenatis, mi condimentum lacinia feugiat,
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce est lectus, rhoncus id suscipit ac, fringilla vulputate odio. Suspendisse sagittis eros eu orci vehicula eleifend congue risus pretium. Donec sodales, sem non elementum varius, arcu tortor aliquam diam, euismod suscipit lacus arcu posuere justo. Phasellus euismod nisl at est fringilla ac dictum purus feugiat. In euismod pulvinar auctor. In bibendum, nibh in tristique fringilla, lorem tortor fermentum ipsum, vel vestibulum dolor est ut risus. Cras quis risus eu tellus vulputate consectetur ut tempor orci. Nulla accumsan felis in dolor tincidunt et adipiscing justo commodo. Vivamus tempor ante ac lacus tempor semper. Sed nec ante nulla, non placerat ipsum. Nunc ut erat sit amet elit commodo semper. Fusce eu lectus at velit cursus placerat at ac nibh. Donec venenatis, mi condimentum lacinia feugiat,
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce est lectus, rhoncus id suscipit ac, fringilla vulputate odio. Suspendisse sagittis eros eu orci vehicula eleifend congue risus pretium. Donec sodales, sem non elementum varius, arcu tortor aliquam diam, euismod suscipit lacus arcu posuere justo. Phasellus euismod nisl at est fringilla ac dictum purus feugiat. In euismod pulvinar auctor. In bibendum, nibh in tristique fringilla, lorem tortor fermentum ipsum, vel vestibulum dolor est ut risus. Cras quis risus eu tellus vulputate consectetur ut tempor orci. Nulla accumsan felis in dolor tincidunt et adipiscing justo commodo. Vivamus tempor ante ac lacus tempor semper. Sed nec ante nulla, non placerat ipsum. Nunc ut erat sit amet elit commodo semper. Fusce eu lectus at velit cursus placerat at ac nibh. Donec venenatis, mi condimentum lacinia feugiat,
arcu elit interdum dui, non volutpat turpis magna nec augue.
arcu elit interdum dui, non volutpat turpis magna nec augue.
arcu elit interdum dui, non volutpat turpis magna nec augue.
arcu elit interdum dui, non volutpat turpis magna nec augue.
</div>

</body>
</html>
	<html>
	<head>
	</head>
	<body>

	<style>
	/* ============================================================================================================================
	== BUBBLE WITH A BORDER AND TRIANGLE
	** ============================================================================================================================ */

	/* THE SPEECH BUBBLE
	------------------------------------------------------------------------------------------------------------------------------- */

	.triangle-border {
	width: 270px;
	position:relative;
	padding:15px;
	margin:1em 0 3em;
	border:4px solid #33c5f4;
	color:#333;
	background:#fff;
	/* css3 */
	-webkit-border-radius:0px;
	-moz-border-radius:0px;
	border-radius:0px;
	}

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

	.triangle-border.left {
	margin-left:30px;
	}

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

	.triangle-border.right {
	margin-right:30px;
	}

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

	.triangle-border:before {
	content:"";
	position:absolute;
	bottom:-20px; /* value = - border-top-width - border-bottom-width */
	left:40px; /* controls horizontal position */
	border-width:20px 20px 0;
	border-style:solid;
	border-color:#33c5f4 transparent;
	/* reduce the damage in FF3.0 */
	display:block;
	width:0;
	}

	/* creates the smaller triangle */
	.triangle-border:after {
	content:"";
	position:absolute;
	bottom:-13px; /* value = - border-top-width - border-bottom-width */
	left:47px; /* value = (:before left) + (:before border-left) - (:after border-left) */
	border-width:13px 13px 0;
	border-style:solid;
	border-color:#fff transparent;
	/* reduce the damage in FF3.0 */
	display:block;
	width:0;
	}

	/* Variant : top
	------------------------------------------ */

	/* creates the larger triangle */
	.triangle-border.top:before {
	top:-20px; /* value = - border-top-width - border-bottom-width */
	bottom:auto;
	left:auto;
	right:40px; /* controls horizontal position */
	border-width:0 20px 20px;
	}

	/* creates the smaller triangle */
	.triangle-border.top:after {
	top:-13px; /* value = - border-top-width - border-bottom-width */
	bottom:auto;
	left:auto;
	right:47px; /* value = (:before right) + (:before border-right) - (:after border-right) */
	border-width:0 13px 13px;
	}

	/* Variant : left
	------------------------------------------ */

	/* creates the larger triangle */
	.triangle-border.left:before {
	top:10px; /* controls vertical position */
	bottom:auto;
	left:-30px; /* value = - border-left-width - border-right-width */
	border-width:15px 30px 15px 0;
	border-color:transparent #5a8f00;
	}

	/* creates the smaller triangle */
	.triangle-border.left:after {
	top:16px; /* value = (:before top) + (:before border-top) - (:after border-top) */
	bottom:auto;
	left:-21px; /* value = - border-left-width - border-right-width */
	border-width:9px 21px 9px 0;
	border-color:transparent #fff;
	}

	/* Variant : right
	------------------------------------------ */

	/* creates the larger triangle */
	.triangle-border.right:before {
	top:10px; /* controls vertical position */
	bottom:auto;
	left:auto;
	right:-30px; /* value = - border-left-width - border-right-width */
	border-width:15px 0 15px 30px;
	border-color:transparent #5a8f00;
	}

	/* creates the smaller triangle */
	.triangle-border.right:after {
	top:16px; /* value = (:before top) + (:before border-top) - (:after border-top) */
	bottom:auto;
	left:auto;
	right:-21px; /* value = - border-left-width - border-right-width */
	border-width:9px 0 9px 21px;
	border-color:transparent #fff;
	}

	</style>



	<div class="triangle-border">
	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce est lectus, rhoncus id suscipit ac, fringilla vulputate odio. Suspendisse sagittis eros eu orci vehicula eleifend congue risus pretium. Donec sodales, sem non elementum varius, arcu tortor aliquam diam, euismod suscipit lacus arcu posuere justo. Phasellus euismod nisl at est fringilla ac dictum purus feugiat. In euismod pulvinar auctor. In bibendum, nibh in tristique fringilla, lorem tortor fermentum ipsum, vel vestibulum dolor est ut risus. Cras quis risus eu tellus vulputate consectetur ut tempor orci. Nulla accumsan felis in dolor tincidunt et adipiscing justo commodo. Vivamus tempor ante ac lacus tempor semper. Sed nec ante nulla, non placerat ipsum. Nunc ut erat sit amet elit commodo semper. Fusce eu lectus at velit cursus placerat at ac nibh. Donec venenatis, mi condimentum lacinia feugiat,
	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce est lectus, rhoncus id suscipit ac, fringilla vulputate odio. Suspendisse sagittis eros eu orci vehicula eleifend congue risus pretium. Donec sodales, sem non elementum varius, arcu tortor aliquam diam, euismod suscipit lacus arcu posuere justo. Phasellus euismod nisl at est fringilla ac dictum purus feugiat. In euismod pulvinar auctor. In bibendum, nibh in tristique fringilla, lorem tortor fermentum ipsum, vel vestibulum dolor est ut risus. Cras quis risus eu tellus vulputate consectetur ut tempor orci. Nulla accumsan felis in dolor tincidunt et adipiscing justo commodo. Vivamus tempor ante ac lacus tempor semper. Sed nec ante nulla, non placerat ipsum. Nunc ut erat sit amet elit commodo semper. Fusce eu lectus at velit cursus placerat at ac nibh. Donec venenatis, mi condimentum lacinia feugiat,
	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce est lectus, rhoncus id suscipit ac, fringilla vulputate odio. Suspendisse sagittis eros eu orci vehicula eleifend congue risus pretium. Donec sodales, sem non elementum varius, arcu tortor aliquam diam, euismod suscipit lacus arcu posuere justo. Phasellus euismod nisl at est fringilla ac dictum purus feugiat. In euismod pulvinar auctor. In bibendum, nibh in tristique fringilla, lorem tortor fermentum ipsum, vel vestibulum dolor est ut risus. Cras quis risus eu tellus vulputate consectetur ut tempor orci. Nulla accumsan felis in dolor tincidunt et adipiscing justo commodo. Vivamus tempor ante ac lacus tempor semper. Sed nec ante nulla, non placerat ipsum. Nunc ut erat sit amet elit commodo semper. Fusce eu lectus at velit cursus placerat at ac nibh. Donec venenatis, mi condimentum lacinia feugiat,
	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce est lectus, rhoncus id suscipit ac, fringilla vulputate odio. Suspendisse sagittis eros eu orci vehicula eleifend congue risus pretium. Donec sodales, sem non elementum varius, arcu tortor aliquam diam, euismod suscipit lacus arcu posuere justo. Phasellus euismod nisl at est fringilla ac dictum purus feugiat. In euismod pulvinar auctor. In bibendum, nibh in tristique fringilla, lorem tortor fermentum ipsum, vel vestibulum dolor est ut risus. Cras quis risus eu tellus vulputate consectetur ut tempor orci. Nulla accumsan felis in dolor tincidunt et adipiscing justo commodo. Vivamus tempor ante ac lacus tempor semper. Sed nec ante nulla, non placerat ipsum. Nunc ut erat sit amet elit commodo semper. Fusce eu lectus at velit cursus placerat at ac nibh. Donec venenatis, mi condimentum lacinia feugiat,
	arcu elit interdum dui, non volutpat turpis magna nec augue.
	arcu elit interdum dui, non volutpat turpis magna nec augue.
	arcu elit interdum dui, non volutpat turpis magna nec augue.
	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce est lectus, rhoncus id suscipit ac, fringilla vulputate odio. Suspendisse sagittis eros eu orci vehicula eleifend congue risus pretium. Donec sodales, sem non elementum varius, arcu tortor aliquam diam, euismod suscipit lacus arcu posuere justo. Phasellus euismod nisl at est fringilla ac dictum purus feugiat. In euismod pulvinar auctor. In bibendum, nibh in tristique fringilla, lorem tortor fermentum ipsum, vel vestibulum dolor est ut risus. Cras quis risus eu tellus vulputate consectetur ut tempor orci. Nulla accumsan felis in dolor tincidunt et adipiscing justo commodo. Vivamus tempor ante ac lacus tempor semper. Sed nec ante nulla, non placerat ipsum. Nunc ut erat sit amet elit commodo semper. Fusce eu lectus at velit cursus placerat at ac nibh. Donec venenatis, mi condimentum lacinia feugiat,
	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce est lectus, rhoncus id suscipit ac, fringilla vulputate odio. Suspendisse sagittis eros eu orci vehicula eleifend congue risus pretium. Donec sodales, sem non elementum varius, arcu tortor aliquam diam, euismod suscipit lacus arcu posuere justo. Phasellus euismod nisl at est fringilla ac dictum purus feugiat. In euismod pulvinar auctor. In bibendum, nibh in tristique fringilla, lorem tortor fermentum ipsum, vel vestibulum dolor est ut risus. Cras quis risus eu tellus vulputate consectetur ut tempor orci. Nulla accumsan felis in dolor tincidunt et adipiscing justo commodo. Vivamus tempor ante ac lacus tempor semper. Sed nec ante nulla, non placerat ipsum. Nunc ut erat sit amet elit commodo semper. Fusce eu lectus at velit cursus placerat at ac nibh. Donec venenatis, mi condimentum lacinia feugiat,
	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce est lectus, rhoncus id suscipit ac, fringilla vulputate odio. Suspendisse sagittis eros eu orci vehicula eleifend congue risus pretium. Donec sodales, sem non elementum varius, arcu tortor aliquam diam, euismod suscipit lacus arcu posuere justo. Phasellus euismod nisl at est fringilla ac dictum purus feugiat. In euismod pulvinar auctor. In bibendum, nibh in tristique fringilla, lorem tortor fermentum ipsum, vel vestibulum dolor est ut risus. Cras quis risus eu tellus vulputate consectetur ut tempor orci. Nulla accumsan felis in dolor tincidunt et adipiscing justo commodo. Vivamus tempor ante ac lacus tempor semper. Sed nec ante nulla, non placerat ipsum. Nunc ut erat sit amet elit commodo semper. Fusce eu lectus at velit cursus placerat at ac nibh. Donec venenatis, mi condimentum lacinia feugiat,
	arcu elit interdum dui, non volutpat turpis magna nec augue.
	arcu elit interdum dui, non volutpat turpis magna nec augue.
	arcu elit interdum dui, non volutpat turpis magna nec augue.
	arcu elit interdum dui, non volutpat turpis magna nec augue.
	</div>

	</body>
	</html>