Chat bubble

html #ui#svg
<div>
	<svg width="13" height="14" fill="hsl(23, 100%, 50%)">
		<path d="M6 .246c-.175 5.992-1.539 8.89-5.5 13.5 6.117.073 9.128-.306 12.5-3L6 .246Z"></path>
	</svg>
	<span>Testing a chat bubble</span>
</div>

<style>
	div {
		margin: 0 0 0 4px;
		position: relative;

		span {
			background-color: hsl(23, 100%, 50%);
			color: white;
			font-family: Verdana;
			font-size: 12px;
			border-radius: 14px;
			padding: 6px 12px;
			display: block;
			width: fit-content;
		}

		svg {
			position: absolute;
			left: -5.5px;
			bottom: 0.246px;
		}
	}
</style>