Sass triangle arrow mixin.

chat.html

<div id="chat" my-debug>
	<div class="message">
		Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc consectetur consequat ligula vel consectetur.
	</div>

	<div class="message">
		Vivamus ut gravida sem, vel sodales nibh. Morbi mollis luctus nisl non volutpat.
	</div>

	<div class="message my-message">
		Integer non bibendum est, eget dapibus nibh.
	</div>
</div>

preview.png

sass-triangle-arrow-mixin.scss

// Mixins
@mixin arrow($direction, $color, $width: 20px, $height: 15px) {
	margin-#{$direction}: $width;

	position: relative;
	&::before {
		position: absolute;
		top: 0;
		#{$direction}: - $width;

		content: '';
		border-top: $height solid $color;
		border-#{$direction}: $width solid transparent;
	}
}

// Helpers
[my-debug] {
	outline: 2px dashed red;
}

// Normalize
:root {
	box-sizing: border-box;
}

*,
*::before,
*::after {
	box-sizing: inherit;
}

// Chat
#chat {
	padding: 40px;

	&::after {
		display: block;
		content: '';
		clear: both;
	}
}

.message {
	&:not(:last-child) {
		margin-bottom: 40px;
	}

	clear: both;

	max-width: 60%;
	padding: 20px;
	border-radius: 10px;

	&:not(.my-message) {
		float: left;

		background-color: #b3b3b3;
		border-top-left-radius: initial;
		@include arrow(left, #b3b3b3);
	}
	&.my-message {
		float: right;

		background-color: #0050bf;
		border-top-right-radius: initial;
		@include arrow(right, #0050bf);

		color: #ffffff;
	}
}