Message Bubbles

message.html

<div class="message orient-left theme-blue">
	<div class="message-inner">		
		<div class="message-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pulvinar sodales ipsum, sit amet ultricies sem ultrices ut. Fusce lorem.</div>
	</div>
</div>
<div class="message orient-right theme-gray">
	<div class="message-inner">		
		<div class="message-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pulvinar sodales ipsum, sit amet ultricies sem ultrices ut. Fusce lorem.</div>
	</div>
</div>

message.less

.message-bubble-theme(@color) {
	.message-inner {
		border-color: @color;
		border-bottom-color: darken(@color, 10%);
		background-color: lighten(@color, 10%);

		&:before {
			border-left-color: @color;
			border-right-color: @color;
		}
		
		&:after {
			border-left-color: lighten(@color, 10%);
			border-right-color: lighten(@color, 10%);
		}

		.message-body {
			color: darken(@color, 50%);
		}
	}
}

.message {
	@border-size: 1px;
	@arrow-size: 15px;
	@arrow-offset-x: 0px;
	@arrow-offset-y: 15px;
	position: relative;

	&:not(:last-child) {
		margin-bottom: 15px;
	}
	
	&.theme-blue {
		.message-bubble-theme(#8888ff);
	}
	
	&.theme-gray {
		.message-bubble-theme(#dddddd);
	}

	&.orient-left {
		left: 0;
		padding-left: @arrow-size;

		.message-inner {
			&:before {
				left: @arrow-offset-x;
				border-right-width: @arrow-size;
				border-right-style: solid;
			}
			
			&:after {
				left: @arrow-offset-x + (@border-size * 2);
				border-right-width: @arrow-size - @border-size;
				border-right-style: solid;
			}

			.message-body {
				text-align: left;
			}
		}
	}

	&.orient-right {
		right: 0;
		padding-right: @arrow-size;
		
		.message-inner {
			&:before {
				right: @arrow-offset-x;
				border-left-width: @arrow-size;
				border-left-style: solid;
			}
			
			&:after {
				right: @arrow-offset-x + (@border-size * 2);
				border-left-width: @arrow-size - @border-size;
				border-left-style: solid;
			}

			.message-body {
				text-align: right;
			}
		}
	}

	.message-body {
		color: #666666;
	}

	.message-inner {
		padding: 10px;
		border-width: @border-size;
		border-bottom-width: @border-size + 1px;
		border-style: solid;
		.border-radius(4px);

		&:before {
			.size(0);
			content: ' ';
			position: absolute;
			top: @arrow-offset-y - @border-size;
			border-bottom: @arrow-size solid transparent;
		}
		
		&:after {
			.size(0);
			content: ' ';
			position: absolute;
			top: @arrow-offset-y;
			border-bottom: @arrow-size - @border-size solid transparent;
		}
	}
}

http://codepen.io/jabes/pen/tAHiw