css - 如何使用 CSS 将图像添加到 div 气泡
问题描述
下面的代码显示了左右气泡。如何使用 CSS 分别将左右图像添加到聊天气泡工具提示?
屏幕截图更新
添加了显示正在尝试实施的屏幕截图。聊天气泡左侧的 left.png 图像和右侧的 right.png 图像。
下面是我要添加到聊天气泡的左右图像
<img src="right.png" width="20px" height="20px">
<img src="left.png" width="20px" height="20px">
以下是到目前为止的代码。
* {
margin: 0px;
padding: 0px;
}
.box3 {
width: 300px;
margin: 10px auto;
border-radius: 15px;
background: #00bfb6;
color: #fff;
padding: 20px;
text-align: center;
font-weight: 900;
font-family: arial;
position: relative;
}
/* right bubble */
.right:before {
content: "";
width: 0px;
height: 0px;
position: absolute;
border-left: 15px solid #00bfb6;
border-right: 15px solid transparent;
border-top: 15px solid #00bfb6;
border-bottom: 15px solid transparent;
right: -16px;
top: 0px;
}
/* left bubble */
.left:before {
content: "";
width: 0px;
height: 0px;
position: absolute;
border-left: 15px solid transparent;
border-right: 15px solid #00bfb6;
border-top: 15px solid #00bfb6;
border-bottom: 15px solid transparent;
left: -16px;
top: 0px;
}
<div class="box3 right">right bubble using css</div>
<div class="box3 left">left bubble using css</div>
解决方案
我会在几年内完成它,作为一个谜题.. :-P
HTML
<div class="box3 right-up"><img src="https://picsum.photos/50/50?image=1069">right bubble using css</div>
<div class="box3 right-down"><img src="https://picsum.photos/50/50?image=1069">right bubble using css</div>
<div class="box3 left"><img src="https://picsum.photos/50/50?image=1069">left bubble using css</div>
CSS
* {
margin: 0px;
padding: 0px;
}
.box3 {
margin: 0 auto;
width: 300px;
border-radius: 15px;
background: #00bfb6;
color: #fff;
padding: 20px;
text-align: center;
font-weight: 900;
font-family: arial;
position: relative;
}
.box3 > img {
border-radius:50%;
position:absolute;
top:-15px;
}
.right-up > img {
display:none;
}
.right-down > img {
left:calc(100% + 20px);
}
.left > img {
right:calc(100% + 20px);
}
/* right-up bubble */
.right-up {
margin-top: 30px;
}
.right-up:before {
margin: 20px auto;
content: "";
width: 0px;
height: 0px;
position: absolute;
border-left: 15px solid #00bfb6;
border-right: 15px solid transparent;
border-top: 15px solid transparent;
border-bottom: 15px solid #00bfb6;
right: -16px;
top: 33px;
}
.right-down {
margin-bottom: 30px;
}
.right-down:before {
margin: 20px auto;
content: "";
width: 0px;
height: 0px;
position: absolute;
border-left: 15px solid #00bfb6;
border-right: 15px solid transparent;
border-top: 15px solid #00bfb6;
border-bottom: 15px solid transparent;
right: -16px;
top: 0px;
}
/* left bubble */
.left:before {
margin: 20px auto;
content: "";
width: 0px;
height: 0px;
position: absolute;
border-left: 15px solid transparent;
border-right: 15px solid #00bfb6;
border-top: 15px solid #00bfb6;
border-bottom: 15px solid transparent;
left: -16px;
top: 0px;
}
推荐阅读
- django - 如何在Django的类别列表中显示帖子列表
- python - 当我打开它以添加新文档时,Whoosh 索引文件被覆盖
- android - 如何将 android 的日期选择器更改为 Material 主题的微调器?
- homebrew - 检测到 Big Sur 潜在提权漏洞的乘客
- angular - Angular Jasmine“无法读取未定义的属性”
- python - 将 Timekeeper Windows Hosts PowerShell 脚本翻译成 Python3 for Linux Hosts
- jenkins-plugins - Selenium Allure 报告数据显示在 Grafana 仪表板上
- python - 写入 csv,导致一些数据保存在单独的行中
- postgresql - 在postgresql中插入触发器,动态语句
- python - 仅从 Libpostal (Pypostal) 获取街道和乡村 - PySpark