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

Question

我们正在开发聊天应用程序，在该应用程序中我们在 div 中显示文本，但我想为该 div(右上角)提供类似 聊天框方向 的 css/左边框) 如下图所示。

我在屏幕截图中用红色标记了我到底需要做什么

需求截图

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

如何在聊天框中给出姓名、时间和消息。就像我想要的下面的屏幕截图

Answer 1

使用伪元素::after 和::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>

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