Online CSS Editor

<!DOCTYPE html> <html> <head> <style> .cb { position: relative; padding: 2%; border-radius: 8%; width:25%; } .cb::after { content: ""; position: absolute; height: 30px; width: 30px; bottom: -30px; left: 80%; } #one { box-shadow: inset 0 0 12px green; left: 65%; } #two { box-shadow: inset 0 0 12px blue; left: 4%; } #one::after { left: 80%; box-shadow: inset 0 0 12px green; clip-path: polygon(0 0, 100% 0, 100% 80%); } #two::after{ left: 8%; box-shadow: inset 0 0 12px blue; clip-path: polygon(0 0, 100% 0, 0 80%); } </style> </head> <body> <div class="cb" id="one"> Demo Comment 1 </div> <div class="cb" id="two"> Demo Comment 2 </div> </body> </html>