首页 > 其他分享 >css实现聊天对话框效果

css实现聊天对话框效果

时间:2022-12-05 15:38:47浏览次数:38  
标签:right 对话框 solid 13px radius 聊天 10px border css


效果:

css实现聊天对话框效果_html


可以看做是一个长方形和一个三角形组成的,关键css代码:

#talk {
margin-left: 50px;
width: 220px;
height: 60px;
background: #9EEA6A;
position: relative;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
#talk:before {
content:"";
position: absolute;
right: 100%;
top: 16px;
width: 0;
height: 0;
border-top: 13px solid transparent;
border-right: 26px solid #9EEA6A;
border-bottom: 13px solid transparent;
}
html:
<div id="talk"></div>
<div id="talk2"></div>


标签:right,对话框,solid,13px,radius,聊天,10px,border,css
From: https://blog.51cto.com/u_15897447/5912415

相关文章

  • css超出部分省略
    1.单行:.div1{width:100px;overflow:hidden;//内容会被修减,并且其余内容是不可见text-overflow:ellipsis;//显示省略号来代替被修减文本white-space:nowrap......
  • css3动画效果一览
     <divhs-animate-in-class="animate__animated${下面的动画库}"></div>         ......
  • 前端基础-02-CSS
    CSS介绍CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素。当浏览器读到一个样式表,它就会按照这个样式表来对文档进行格式化(渲染)。CSS语法CSS实例每个CSS......
  • React后台管理系统 03全局样式scss
    安装scss样式依赖,使用命令npmi--save-devsass --dev会将依赖安装在devDependencies=>开发环境的依赖。我们在src目录下的assets下创建styles文件夹,然后创建文件gl......
  • React后台管理系统 02样式初始化,引入reset-css
    上一篇中,我们已经对项目的整体结构进行了搭建,现在需要对不需要的东西进行删除,最后留下这些东西。现在需要对全部的样式进行清除,使用命令导入依赖:npmireset-css然后在m......
  • css实现渐变色圆环
    效果:<divclass="circle"></div>.circle{width:206px;height:206px;border-radius:50%;background:linear-gradient(0deg,#36A5ED0%,#6EEE96100%)......
  • CSS-盒子模型-内容,边框,内边距,外边距,(合并,塌陷情况)
    CSS-盒子模型-内容,边框,内边距,外边距,(合并,塌陷情况)目标:能够认识盒子模型的组成,****能够掌握盒子模型边框、内边距、外边距的****设置方法学习路径:1.盒子模型的介绍......
  • css: @keyframes
    https://developer.mozilla.org/zh-CN/docs/Web/CSS/@keyframeshttps://www.w3school.com.cn/cssref/pr_keyframes.asp<!doctypehtml><html><head><metachars......
  • CSS布局-优先级的权重,及其计算。Chome调试工具
    CSS布局-优先级的权重,及其计算。Chome调试工具学习目标:◆能够认识不同选择器的优先级公式◆能够进行CSS权重叠加计算,分析并解决CSS冲突问题◆能够认识盒子模......
  • CSS基础-嵌套规范(拓展),居中方法,CSS 特性
    CSS基础-嵌套规范(拓展),居中方法,CSS特性拓展1:HTML嵌套规范注意点1.块级元素一般作为大容器,可以嵌套:文本、块级元素、行内元素、行内块元素等等…… ➢但是:p标签中不要......