CodePen Embed - message bubbles css3 clip-path svg

<div class="bubble-message theme" data-time="11:45 PM">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
<div class="bubble-message theme" data-time="11:45 PM">Curabitur euismod porta bubble-message themeum. Proin sagittis imperdiet dui, non mollis nisl rutrum in. Nulla sagittis erat nec lobortis pulvinar.</div>
<div class="bubble-message theme" data-time="11:46 PM">🎃 ¯\_(ツ)_/¯</div>
<div class="bubble-message repost" data-time="11:47 PM">
	<span class="nickname">@unsplash</span>
	<img src="https://images.unsplash.com/photo-1548802673-380ab8ebc7b7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=675&q=80" alt="cat sleep" class="post-image">
	<p class="message_text"><span class="nickname">unsplash</span> #catsleep #world_of_cats</p>
</div>
<div class="bubble-message theme" data-time="11:47 PM">Nullam scelerisque enim augue, dictum cursus nibh tempus nec. Nullam accumsan bibendum felis. Maecenas sagittis venenatis ligula, ut semper lorem posuere in. Ut egestas est lectus.</div>
<div class="bubble-message theme sticker" data-time="11:48 PM">🎃🎃🎃</div>
<div class="bubble-message theme" data-time="11:48 PM">Duis erat purus, consequat quis dolor eget, hendrerit pretium diam.</div>
<div class="bubble-message theme" data-time="11:48 PM">Integer accumsan magna elit, vitae tempus sapien auctor eu.</div>
<div class="bubble-message theme" data-time="11:49 PM">Aenean bubble-message themeum felis maximus eros pellentesque ullamcorper.</div>
<div class="bubble-message theme sticker" data-time="11:50 PM">❤️</div>
<div class="bubble-message theme" data-time="11:53 PM">Suspendisse potenti.</div>
<div class="bubble-message theme" data-time="11:53 PM">Praesent eu ante neque.</div>
<div class="bubble-message theme" data-time="11:53 PM">Nunc felis odio, mollis in fringilla vitae, consectetur ut erat. In dapibus erat in massa venenatis, sit amet maximus mauris euismod. Aenean accumsan mi ac ex ultricies aliquet.</div>
<div class="bubble-message theme" data-time="11:56 PM">Nullam interdum eros vulputate, ornare mauris ac, commodo magna.</div>
<div class="bubble-message theme" data-time="11:57 PM">Vestibulum sagittis rhoncus sem. Suspendisse potenti.</div>
<div class="bubble-message theme" data-time="0:00 AM">Donec et pretium libero, vitae rutrum nunc. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</div>
<div class="bubble-message theme" data-time="0:01 AM">Donec sit amet sollicitudin mi. Aliquam non massa augue. Maecenas rhoncus eleifend lorem, id posuere sem.</div>
<div class="bubble-message theme" data-time="0:01 AM">Etiam consectetur efficitur volutpat. Fusce suscipit ornare sollicitudin. Vestibulum orci ipsum, tincidunt eu consequat facilisis, fringilla ut lectus.</div>
<div class="bubble-message theme" data-time="0:01 AM">Aenean non odio ornare, porta leo eget, pharetra sem.</div>
<div class="bubble-message theme" data-time="0:01 AM">Vivamus a eleifend ex. In a tristique nulla.</div>
<div class="bubble-message theme" data-time="0:02 AM">Aenean at imperdiet nisi, sed condimentum eros. Nunc et nisi in dui convallis scelerisque in a lorem.</div>
<div class="bubble-message theme" data-time="0:03 AM">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
<div class="bubble-message theme" data-time="0:03 AM">Curabitur euismod porta bubble-message themeum. Proin sagittis imperdiet dui, non mollis nisl rutrum in. Nulla sagittis erat nec lobortis pulvinar.</div>
<div class="bubble-message theme" data-time="0:03 AM">Nullam scelerisque enim augue, dictum cursus nibh tempus nec. Nullam accumsan bibendum felis. Maecenas sagittis venenatis ligula, ut semper lorem posuere in. Ut egestas est lectus.</div>
<div class="bubble-message repost" data-time="11:47 PM">
	<span class="nickname">@unsplash</span>
	<img src="https://images.unsplash.com/photo-1548366086-7f1b76106622?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=624&q=80" alt="cat" class="post-image">
	<p class="message_text"><span class="nickname">unsplash</span> #cat #world_of_cats</p>
</div>
<div class="bubble-message theme" data-time="0:04 AM">Duis erat purus, consequat quis dolor eget, hendrerit pretium diam.</div>
<div class="bubble-message theme" data-time="0:05 AM">Integer accumsan magna elit, vitae tempus sapien auctor eu.</div>
<div class="bubble-message theme" data-time="0:07 AM">Aenean bubble-message themeum felis maximus eros pellentesque ullamcorper.</div>
<div class="bubble-message theme" data-time="0:08 AM">Suspendisse potenti.</div>
<div class="bubble-message theme" data-time="0:21 AM">Praesent eu ante neque.</div>
<div class="bubble-message theme" data-time="0:22 AM">Nunc felis odio, mollis in fringilla vitae, consectetur ut erat. In dapibus erat in massa venenatis, sit amet maximus mauris euismod. Aenean accumsan mi ac ex ultricies aliquet.</div>
<div class="bubble-message theme" data-time="0:23 AM">Nullam interdum eros vulputate, ornare mauris ac, commodo magna.</div>
<div class="bubble-message theme" data-time="0:23 AM">Vestibulum sagittis rhoncus sem. Suspendisse potenti.</div>
<div class="bubble-message theme" data-time="0:24 AM">Donec et pretium libero, vitae rutrum nunc. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</div>
<div class="bubble-message theme" data-time="0:30 AM">Donec sit amet sollicitudin mi. Aliquam non massa augue. Maecenas rhoncus eleifend lorem, id posuere sem.</div>
<div class="bubble-message theme" data-time="0:30 AM">Etiam consectetur efficitur volutpat. Fusce suscipit ornare sollicitudin. Vestibulum orci ipsum, tincidunt eu consequat facilisis, fringilla ut lectus.</div>
<div class="bubble-message theme" data-time="0:31 AM">Aenean non odio ornare, porta leo eget, pharetra sem.</div>
<div class="bubble-message theme" data-time="0:31 AM">Vivamus a eleifend ex. In a tristique nulla.</div>
<div class="bubble-message theme sticker" data-time="0:33 AM">😺😺😺</div>
<div class="bubble-message theme" data-time="0:34 AM">Aenean at imperdiet nisi, sed condimentum eros. Nunc et nisi in dui convallis scelerisque in a lorem.</div>

<svg height="0" width="0">
    <defs>
        <clipPath id="svgPath">
						<path fill="#FFFFFF" d="M20,20H0V0H0A20,20,0,0,0,20,20Z"/>
        </clipPath>
    </defs>
</svg>

@import url('https://fonts.googleapis.com/css2?family=PT+Sans&display=swap');

body {
	display: flex;
	width: 100%;
	justify-content: flex-start;
	align-items: flex-end;
	flex-direction: column;
	margin: 0 auto;
	padding: 0;
	font-family: 'PT Sans', sans-serif;
	background: #212121;
}
.bubble-message {
	box-sizing: border-box;
	text-align: right;
	text-align: justify;
	padding: 10px;
	color: #fff;
	display: flex;
	/* position: fixed; */
	min-height: 40px;
	min-width: 20px;
	/* max-width: 60vw; */
	max-width: 50vw;
	/* right: 200px; */
	/* bottom: 200px; */
	border-radius: 20px;
	border-bottom-right-radius: 0;
	margin: 8px 26px 8px 0;
	font-size: 14px;
	line-height: 1.5em;
	position: relative;
	transition: width .3s ease-in-out;
}
.repost{
	background: #424242;
	padding: 10px 0;
	display: flex;
	flex-direction: column;
}
.message_text{
	font-size: 12px;
	padding: 0;
	margin: 0;
}
.nickname {
	margin: 0 0 6px 10px;
	font-weight: bold;
}
.theme{
	background-image: linear-gradient(to bottom, #d4a241, #ef4b42, #8b599e);
	background-size: 100vw 100vh;
	background-position-y: 100vh;
	background-attachment: fixed;
}
.bubble-message::after {
	content: '';
	position: absolute;
	bottom: 0;
	right: -20px;
	display: block;
	height: 20px;
	width: 20px;
	z-index: -1;
	background: inherit;
	clip-path: url(#svgPath);
}
.bubble-message::before {
	content: attr(data-time);
	display: flex;
	justify-content: flex-end;
	align-items: flex-end;
	position: absolute;
	right: 100%;
	top: 0;
	box-sizing: border-box;
	padding: 0 8px 8px 0;
	bottom: 0;
	height: 100%;
	width: 70px;
	text-align: right;
	vertical-align: center;
	color: #818181;
	font-size: 12px;
	line-height: 12px;
	opacity: 0;
	transition: opacity .3s	ease-in-out;
/* 	background: #424242; */
}
.bubble-message:hover::before {
	opacity: .7;
}
.sticker {
	font-size: 54px;
	padding: 0;
	font-weight: bold;
	background: transparent;
}
.post-image {
	width: 250px;
	padding: 0 0 10px 0;
}
@media screen and (max-width: 767px) {
	.bubble-message {
		margin: 8px 26px 14px 16px;
		max-width: 100%;
		transition: width .3s ease-in-out;
	}
	.bubble-message::before {
		right: 0;
		top: 100%;
		box-sizing: border-box;
		padding: 0;
		height: 15px;
		transition: opacity .3s	ease-in-out;
/* 		background: #424242; */
	}
	.post-image {
		width: 100%;
		padding: 0 0 10px 0;
	}
}

const withEmojis = /\p{Emoji}/u;
let emoji = document.querySelectorAll('.bubble-message');
console.log(
	withEmojis.test(emoji[2].textContent)
);

This Pen is owned by Alexandr on CodePen.

See more by @sh3mahan on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.