如何显示聊天框的div / p标签左上角/右角 [英] how to show like chat box for the div/p tag top left/right corners

问题描述

我们在该应用程序中开发聊天应用程序，我们正在div中显示文本，但是我想为 div（右上角）指定聊天框方向 / b>像下面的屏幕截图。

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

要求截屏

div class =snippet-code>

.right {position：relative;背景：白色; text-align：right;填充：10px 15px; border-radius：6px; border：1px solid #ccc; float：right; right：20px;}。right :: before {content：'';位置：绝对;可见度：可见的; top：-1px;正确：-10px;边框：10px实心透明; border-top：10px solid #ccc;}。right :: after {content：'';位置：绝对;可见度：可见的; top：0px;正确：-8px;边框：10px实心透明;边框顶部：10px纯白色;明确：两者; } div {clear：right;}。right img {display：block;身高：自动;最大宽度：100％;}

< div class = 右 > < span>谢谢< / span>< / div>< div class =right> < p style =margin-top：0px; margin-bottom：0px; color：green; font-size：11px;> Kranti< / p> <跨度>感谢< /跨度> < p style =float：left; margin-bottom：0px; color：red; font-size：11px;> 2：33 PM< / p>< / div>< div class =right > < span> thanks< / span>< / div>

>如何在聊天框中提供姓名，时间和消息。
像下面的屏幕截图我想要的

解决方案

使用pseudoelements :: after和:: before。

  .right {
 position：relative; 
背景：aqua; 
 text-align：right; 
最小宽度：45％; 
 padding：10px 15px; 
 border-radius：6px; 
 border：1px solid #ccc; 
 float：right; 
 right：20px; 
} 
 
 .right :: before {
 content：''; 
位置：绝对; 
可见性：可见; 
 top：-1px; 
 right：-10px; 
 border：10px纯透明; 
 border-top：10px solid #ccc; 
} 
 
 .right :: after {
 content：''; 
位置：绝对; 
可见性：可见; 
 top：0px; 
 right：-8px; 
 border：10px纯透明; 
 border-top：10px solid aqua; 
明确：两者; 
 
  

  < div class =right> 
< span>谢谢< / span> 
< / div> 
  

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

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

解决方案

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/

这篇关于如何显示聊天框的div / p标签左上角/右角的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！