如何显示div / p标签左上/右上角的聊天框

Question

我们正在该应用程序中开发聊天应用程序我们在div中显示文本但我想为 div（右上角）提供聊天框方向等CSS /左边框）如下面的屏幕截图。

我在屏幕截图中用红色标记我究竟需要做什么

要求屏幕截图

＆＃13;

＆＃13;

.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%;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

如何在聊天框中给出姓名，时间和消息。 比如我想要的屏幕截图

Answer 1

在and :: before之后使用pseudoelements ::

.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>

例如https://jsfiddle.net/2bekec10/