css - 如何更改此聊天框的边框，使其看起来像附图中的那样-6ren

css - 如何更改此聊天框的边框，使其看起来像附图中的那样

转载作者：行者123 更新时间：2023-11-28 05:17:20

我想更改显示在聊天框中的消息的边框，它应该像图片中的那样，请建议如何实现它，因为我不知道该怎么做。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Example</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<style type="text/css">
    
body{margin-top:20px;}

@import url(https://fonts.googleapis.com/css?family=Oswald:400,300);
@import url(https://fonts.googleapis.com/css?family=Open+Sans);
body
{
font-family: 'Open Sans', sans-serif;
}
.chat_box .chat_message_wrapper ul.chat_message > li + li {
    margin-top: 4px;
}

.chat_box_wrapper.chat_box_small.chat_box_active {
    background:#e1e3e5;
    height: 600px;
    overflow-y: auto; 
    width: 450px;
}

.chat_box {
    padding: 16px;
}
.chat_box .chat_message_wrapper::after {
    clear: both;
}
.chat_box .chat_message_wrapper::after, .chat_box .chat_message_wrapper::before {
    content: " ";
    display: table;
}
.chat_box .chat_message_wrapper .chat_user_avatar {
    float: left;
}
.chat_box .chat_message_wrapper {
    margin-bottom: 20px;
}
.md-user-image {
    border-radius: 50%;
    width: 48px;
	height:48px;
}
img {
    border: 0 none;
    box-sizing: border-box;
    height: auto;
    max-width: 100%;
    vertical-align: middle;
}
.chat_box .chat_message_wrapper ul.chat_message, .chat_box .chat_message_wrapper ul.chat_message > li {
    list-style: outside none none;
    padding: 0;
}
.chat_box .chat_message_wrapper ul.chat_message {
    float: left;
    margin: 0 0 0 20px;
    max-width: 67%;
}
.chat_box.chat_box_colors_a .chat_message_wrapper ul.chat_message > li:first-child::before {
    border-right-color: #616161;
}
.chat_box .chat_message_wrapper ul.chat_message > li:first-child::before {
    border-color: transparent #ededed transparent transparent;
    border-style: solid;
    border-width: 0 16px 16px 0;
    content: "";
    height: 0;
    left: -14px;
    position: absolute;
    top: 0;
    width: 0;
}
.chat_box.chat_box_colors_a .chat_message_wrapper ul.chat_message > li {
    background: #FCFBF6 none repeat scroll 0 0;
    color: #000000;
}

.chat_box .chat_message_wrapper ul.chat_message > li {
    background: #ededed none repeat scroll 0 0;
    border-radius: 4px;
    clear: both;
    color: #212121;
    display: block;
    float: left;
    font-size: 13px;
    padding: 8px 16px;
    position: relative;
    word-break: break-all;
}
.chat_box .chat_message_wrapper ul.chat_message, .chat_box .chat_message_wrapper ul.chat_message > li {
    list-style: outside none none;
    padding: 0;
}
.chat_box .chat_message_wrapper ul.chat_message > li {
    margin: 0;
}
.chat_box .chat_message_wrapper ul.chat_message > li p {
    margin: 0;
}
.chat_box.chat_box_colors_a .chat_message_wrapper .chat_message_time {
    color: rgba(185, 186, 180, 0.9);
}
.chat_box .chat_message_wrapper .chat_message_time {
    color: #e1e3e5;
	text-align:center;
    display: block;
    font-size: 11px;
    padding-top: 2px;
	font-size:14px;
    text-transform: uppercase;
}
.chat_box .chat_message_wrapper.chat_message_right .chat_user_avatar {
    float: right;
}
.chat_box .chat_message_wrapper.chat_message_right ul.chat_message {
    float: right;
    margin-left: 0 !important;
    margin-right: 24px !important;
}
.chat_box.chat_box_colors_a .chat_message_wrapper.chat_message_right ul.chat_message > li:first-child::before {
    border-left-color: #83acc5;
}
.chat_box.chat_box_colors_a .chat_message_wrapper ul.chat_message > li:first-child::before {
    border-right-color: #FCFBF6;
}
.chat_box .chat_message_wrapper.chat_message_right ul.chat_message > li:first-child::before {
    border-color: transparent transparent transparent #ededed;
    border-width: 0 0 29px 29px;
    left: auto;
    right: -14px;
}
.chat_box .chat_message_wrapper ul.chat_message > li:first-child::before {
    border-color: transparent #ededed transparent transparent;
    border-style: solid;
    border-width: 0 29px 29px 0;
    content: "";
    height: 0;
    left: -14px;
    position: absolute;
    top: 0;
    width: 0;
}
.chat_box.chat_box_colors_a .chat_message_wrapper.chat_message_right ul.chat_message > li {
    background: #83acc5 none repeat scroll 0 0;
}
.chat_box .chat_message_wrapper ul.chat_message > li {
    background: #ededed none repeat scroll 0 0;
    border-radius: 12px;
    clear: both;
    color: #212121;
    display: block;
    float: left;
    font-size: 13px;
    padding: 8px 16px;
    position: relative;
}
</style>
</head>
<body>
<div class="container">
<div id="chat" class="chat_box_wrapper chat_box_small chat_box_active" style="opacity: 1; display: block; transform: translateX(0px);">
                        <div class="chat_box touchscroll chat_box_colors_a">
                            <div class="chat_message_wrapper">
                                <div class="chat_user_avatar">
                                    <a href="https://web.facebook.com/iamgurdeeposahan" target="_blank" >
                                    <img src="http://bootdey.com/img/Content/avatar/avatar1.png" class="md-user-image">
                                    </a>
                                </div>
								<span class="chat_message_time">13:38</span>
                                <ul class="chat_message">
                                    <li>
                                        <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio, eum? </p>
                                    </li>
                                    <li>
                                        <p> Lorem ipsum dolor sit amet </p>
                                    </li>
                                </ul>
                            </div>
                            <div class="chat_message_wrapper chat_message_right">
                                <div class="chat_user_avatar">
                                <a href="https://web.facebook.com/iamgurdeeposahan" target="_blank" >
                                    <img src="http://bootdey.com/img/Content/avatar/avatar1.png" class="md-user-image">
                                </a>
                                </div>
								<span class="chat_message_time">13:34</span>
                                <ul class="chat_message">
                                    <li>
                                        <p>
                                            Lorem ipsum dolor sit amet, consectetur adipisicing elit.  natus nulla perspiciatis quae quasi, quis recusandae, saepe, sunt totam.
                                            
                                        </p>
                                    </li>
                                </ul>
                        </div>
						<div class="chat_message_wrapper chat_message_right">
                                <div class="chat_user_avatar">
                                <a href="https://web.facebook.com/iamgurdeeposahan" target="_blank" >
                                    <img src="http://bootdey.com/img/Content/avatar/avatar1.png" class="md-user-image">
                                </a>
                                </div>
								<span class="chat_message_time">13:34</span>
                                <ul class="chat_message">
                                    <li>
                                        <p>
                                            Lorem ipsum dolor sit amet, consectetur adipisicing elit.atus nulla perspiciatis quae quasi, quis recusandae, saepe, sunt totam.
                                            
                                        </p>
                                    </li>
                                </ul>
                        </div>
						
						<div class="chat_message_wrapper">
                                <div class="chat_user_avatar">
                                    <a href="https://web.facebook.com/iamgurdeeposahan" target="_blank" >
                                    <img src="http://bootdey.com/img/Content/avatar/avatar1.png" class="md-user-image">
                                    </a>
                                </div>
								<span class="chat_message_time">13:34</span>
                                <ul class="chat_message">
                                    <li>
                                        <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio, eum? </p>
                                    </li>
                                    <li>
                                        <p> Lorem ipsum dolor sit amet </p>
                                    </li>
                                </ul>
                            </div>
				</div>
			</div>
		</body>
</html>

我的形象:

my image

最佳答案

带有径向渐变背景的定位伪元素怎么样？

这应该让你接近。

.chat {
  width: 50%;
  height: 75px;
  margin: 1em auto;
  border-radius: 12px;
  background: darkseagreen;
  position: relative;
}
.left {
  border-bottom-left-radius: 0;
}
.right {
  border-bottom-right-radius: 0;
}
.chat::after {
  content: '';
  width: 1.5em;
  height: 1.5em;
  position: absolute;
  bottom: 0;
}
.left::after {
  left: 0;
  transform: translateX(-100%);
  background: radial-gradient(circle at 0 0, transparent, transparent 72%, darkseagreen 72%);
}
.right::after {
  right: 0;
  transform: translateX(100%);
  background: radial-gradient(circle at 100% 0, transparent, transparent 72%, darkseagreen 72%);
}

<div class="chat left"></div>
<div class="chat right"></div>

关于css - 如何更改此聊天框的边框，使其看起来像附图中的那样，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39246210/

文章推荐： javascript - jQuery 过滤器显示数据属性任意或全部

文章推荐： javascript - 将单击的表单传递给 bootbox.confirm()

文章推荐： javascript - 使用 nvd3-ng2 丢失网格线

ios - 如何将多个UIView包裹在圆角矩形中进行排序(附图)？
在下图中，如何将多选项选择器和水平滚动条放在同一个白色圆角矩形中？它看起来非常适合排序，我很想实现类似的东西。最佳答案您需要有一个包含两个部分的 UITableView(一个名为“section
jquery - 我如何定位这些盒子？ (附图)
我正在尝试瞄准带有白点的方框。此图片中的每个黑框都是一篇博文，包括顶部的较大黑框。最初，我想使用 nth-child 但老实说我不确定如何安排它或使用什么数字。我确定 jQuery 是一个选项。如果有
html - 中心定位5排网格(附图)
我正在使用 Next.js 和 SCSS 并尝试使用响应式网格系统在页面中心定位 5 行和 3 行图像。我只需要稍微将图像位置调整到右侧，但内容根本不会移动。代码如下: Next.js // So
jquery - 使图像从一点到另一点动画？ (附图)
更准确地说，我创建了一个描述我的查询的图形: 基本上，我有一个圆形标志。当用户将鼠标悬停在它上面时，我希望弹出一个人脸的图像，或者更确切地说是通过一些动画向上移动。这是我可以用 css3 完成的事情吗
css - 溢出切割结果(附图)
左侧“结果”部分是当前发生的情况。右边的部分是我希望结果发生什么。当结果组对于容器来说似乎很大时，容器底部的结果会隐藏起来。我一直在网上搜索 CSS 修复，非常感谢任何帮助。谢谢。最佳答案您可以
html - 创建此表格布局的最佳方法是什么？ (附图)
关闭。这个问题是opinion-based .它目前不接受答案。想要改进这个问题？更新问题，以便 editing this post 可以用事实和引用来回答它. 关闭 9 年前。 Improv
python - 向networkx添加子节点(附图)
我想创建一个看起来或多或少像这样的networkx图表，但我一直无法找到一种方法让它以我需要的方式显示。大节点和边缘显示良好，但我一直无法找到如何添加小节点。最佳答案 networkx.draw()
algorithm - 简单代码及操作挑战(附图)
我遇到了以下伪代码。这里 A 是一个整数数组: for i = 1 to n { j = i; f = 1; while ((j>1) and (f==1)) {
java - 如何创建迷你对话框(附图)
我在某些应用程序周围看到过这些对话框，但我一直无法弄清楚如何显示/创建它们。我错过了一些明显的东西吗？感谢您的帮助! 最佳答案您可以创建PopupMenu。首先在res/menu文件夹中创建pop
html - outlook中垂直文本对齐不居中[附图]
我目前正在尝试解决在浏览器和通过 gmail 中呈现良好的 html 电子邮件的一些问题，但不幸的是，我在 outlook 中遇到垂直对齐文本的问题(它粘在底部)。这张图片告诉你出了什么问题: TH
javascript - 如何将其制作为 HighChart(附图)
Highcharts 专家!我想制作以下图表(使用 Highcharts 框架)，但不知道从哪里开始。我是否需要将多个图表叠加到一个图表中？我将如何创建具有如所附示例中的图片所示范围的框？有人有任何例
javascript - Facebook 类型弹出下拉列表重新创建(附图)
希望有人能给我指出正确的方向，也许是关于如何创建这些弹出下拉列表的教程，例如喜欢此链接的 Facebook。我假设它是 jquery？ alt text http://2pence.com/pop.j
android - Shortcut如何接受Android Studio的建议(附图)
当 Android Studio 在 Yellow 中向我提示照片如何，接受的快捷方式是什么，这张图片查看全部: 最佳答案根据您的图片，android studio 以黄色显示指定方法可以接受的值类
python - 使用OpenCV/cv2比较标记2张图像的差异(附图)
我想使用 Python 和 cv2 来比较 2 个图像，如下所示。 (Python 2.7 + Windows) c:\Original.jpg c:\Edited.jpg 非常简单，我可以在下面做并
java - NoClassDefFoundError ，这里忽略了什么？ (附图)
症状:我正在使用从创建者的 git 存储库中提取的项目。我包含了它们的库，如 libs 文件夹中所示。项目没有错误，项目编译。然而，当它访问一个应该在 jar 中的对象时，它崩溃了。我已经完成了我在
javascript - Node.js事件循环理解(附图)
我已阅读 this和 this , 观看 this ... 我已经制作了一个图表来说明我是如何理解它的: Javascript 回调(函数)可以存在于 current queue、check queu
android - 我如何编写一个旋转的圆形动画，比如这个(附图)？安卓
我正在开发一个应用程序，并且刚刚构建了它的逻辑部分。现在我想像著名的计时器应用程序一样设计这个应用程序。例如: 我想要的是外圈，它填充了某个事件的每个触发器或数字的增量。我实际上不知道它是动画部分(比
ios - autolayout 可以自动布局这个(附图)吗？
要像这样为 UIView 支持纵向和横向: +-------------------+ | +---------------+ | | | | | | |
android - 在 Android XML 中创建这个形状(附图)？
我知道这个问题非常简短，但我如何才能在 Android Studio 项目中用 XML 创建这个形状？似乎我可以创建一个矩形，然后从中删除一个半圆部分，但在 XML 中实现该效果似乎非常困难。以前有
php - 一个 CSS 类与另一个 CSS 类重叠(附图)
我正在创建一个电子商务网站。在显示折扣盒时，商品的图像向左移动(下图)。我想要商品类别顶部的折扣框(蓝色)。谁能帮我解决这个问题？ CSS 文件 div.item { margin-top:0

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

css - 如何更改此聊天框的边框，使其看起来像附图中的那样