how to show like chat box for the div/p tag top left/right corners

Issue

we are developing chat application in that application we are showing text in div but i want to give css like chat box direction for that div(top right/left border) like below screen shot.

i marked in red color in the screen shot what exactly i need to do

requirement screen shot

.right {
  position: relative;
  background: white;
  text-align: right;
  padding: 10px 15px;
  border-radius: 6px;
  border: 1px solid #ccc;
  float: right;
  right: 20px;
}

.right::before {
  content: '';
  position: absolute;
  visibility: visible;
  top: -1px;
  right: -10px;
  border: 10px solid transparent;
  border-top: 10px solid #ccc;
}

.right::after {
  content: '';
  position: absolute;
  visibility: visible;
  top: 0px;
  right: -8px;
  border: 10px solid transparent;
  border-top: 10px solid white;
  clear: both;
  
}

div{
  clear: right;
}

.right img {
	display: block;
	height: auto;
	max-width: 100%;
}

<div class="right">
  <span>thanks</span>
</div>

<div class="right">
  <p style="margin-top: 0px;margin-bottom: 0px;color:green;font-size: 11px;">Kranti</p>
  <span>thanks</span>
   <p style="float: left;margin-bottom: 0px;color:red;font-size: 11px;">2:33 PM</p>
</div>



<div class="right">
  <span>thanks</span>
</div>

how to give Give name ,time and message in the chat box. like below screen shot i want

Solution

Use pseudoelements ::after and ::before.

.right {
  position: relative;
  background: aqua;
  text-align: right;
  min-width: 45%;
  padding: 10px 15px;
  border-radius: 6px;
  border: 1px solid #ccc;
  float: right;
  right: 20px;
}

.right::before {
  content: '';
  position: absolute;
  visibility: visible;
  top: -1px;
  right: -10px;
  border: 10px solid transparent;
  border-top: 10px solid #ccc;
}

.right::after {
  content: '';
  position: absolute;
  visibility: visible;
  top: 0px;
  right: -8px;
  border: 10px solid transparent;
  border-top: 10px solid aqua;
  clear: both;
}

<div class="right">
  <span>thanks</span>
</div>

For example https://jsfiddle.net/2bekec10/

Answered By - buildok