css聊天气派,css如何实现小尖角聊天对话框带尖角的说话泡泡效果
css如何实现小尖角聊天对话框带尖角的说话泡泡效果
发布时间:2021-03-20 09:44:20
来源:亿速云
阅读:58
作者:小新
这篇文章主要介绍了css如何实现小尖角聊天对话框带尖角的说话泡泡效果,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。
一、css 绘制实现小尖角聊天对话框,带尖角的说话泡泡,先给大家展示下效果图。
二、效果
三、代码css;toolbar:false">
#talkbubble {
width: 160px; height: 80px;
background: red;
position: relative;
border-radius: 10px;
margin-left:20px;
}
#talkbubble:before {
content: "";
position: absolute;
right: 100%;
top: 26px;
border-top: 13px solid transparent;
border-right: 26px solid red;
border-bottom: 13px solid transparent;
}
补充:纯css实现气泡对话框尖角处理
先来看一下效果图:
简单粗暴上代码:
html:
.dialog-box {
position: relative;
span {
width:0;
height:0;
font-size:0;
overflow:hidden;
position:absolute;
&.bot{
border-width: 15px;
border-style: solid dashed dashed;
border-color: transparent transparent #F9743A transparent;
left: 15px;
top: -29px;
}
&.top{
border-width:13px;
border-style:solid dashed dashed;
border-color:transparent transparent #fff transparent;
left:17px;
top:-25px;
}
}
}
大白话讲解:
如果你想要其他方位的尖角,就调整boder-color的顺序(上,右,下,左)。
主要的原理大概是有两个一样形状,比例不同的小三角,一个和底色一样的实心三角bot,一个白色底的top,并且top是会盖在bot上面的,然后调整它们的大小(一般来说实心要比白色块大一点,这样才可以显示出有眼色的边边啊)。
最后想尽一切办法让它们重合(白色的top在上面,实心的bot在下面),最后通过调整绝对定位的参数(left,top)让其重合的天衣无缝。好了,大功告成啦,不知道你get到了没有?
感谢你能够认真阅读完这篇文章,希望小编分享的“css如何实现小尖角聊天对话框带尖角的说话泡泡效果”这篇文章对大家有帮助,同时也希望大家多多支持亿速云,关注亿速云行业资讯频道,更多相关知识等着你来学习!
css聊天气派,css如何实现小尖角聊天对话框带尖角的说话泡泡效果相关推荐
- html矩形加三角,html如何绘制带尖角(三角)的矩形
结合实际情况自己写的: .menu_triangle { height: 10px; width: 10px; background-color: #049888; transform: transl ...
- html5如何文本框去角,HTML5如何实现尖角号
本篇教程探讨了HTML5如何实现尖角号,希望阅读本篇文章以后大家有所收获,帮助大家HTML5+CSS3从入门到精通 . < 首先,来写一个简单的代码: html> Title .arrow ...
- HTML实现友好提示框(带尖角的框)
友好提示框的主要实现难点就是哪个尖角的问题,其实只要搞清楚三角形的实现原理,实现这种效果也并不难,下面介绍两种实现方法,一种是通过边框实现的三角形通过叠加实现,另一种是通过正方形旋转实现 首先我们讲述 ...
- 纯 CSS 实现三角形尖角箭头的实例
为什么80%的码农都做不了架构师?>>> 上次无意中发现了个使用纯 CSS 实现三角形尖角箭头的方法 http://blog.csdn.net/zhouzme/article/ ...
- css 实现一个尖角_一个讲述了 CSS 相关的技巧、动画实现 的开源项目(60篇相关文章)...
iCSS 不止于 CSS 文章围绕 CSS/web动画 展开,谈一些有趣的话题,内容天马行空,想到什么说什么,不仅是为了拓宽解决问题的思路,更涉及一些容易忽视或是十分有趣的 CSS 细节. Artic ...
- 基于CSS实现的尖角提示符
CSS实现的尖角提示 一.概述 ...
- html css画五角星,css画梯形,css画五角星, css画六角星 ,css画六边形
css画梯形,css画五角星, css画六角星 ,css画六边形 css画梯形 .triangle { border-bottom: 100px solid #F36823; border-left: ...
- css 实现一个尖角_纯 CSS 实现三角形尖角箭头的实例
上次无意中发现了个使用纯 CSS 实现三角形尖角箭头的方法 ,但没有怎么用上,也没有详细完整的实例,今天刚好要用上,整理了下,写个完整的代码: 无标题文档 .area { margin:100px a ...
- vue css 应用变量_如何使用CSS Grid和CSS变量快速为应用创建原型
vue css 应用变量 CSS Grid and CSS Variables are both huge wins for front-end developers. The former make ...
最新文章
- C语言求35 45的最大公约数,c语言编程题目及答案
- peoplesoft系统与sap_sap顾问或者peoplesoft顾问转行做自研系统顾问的为什么那么少?...
- python定时任务是异步的吗_定时任务、异步任务
- win10 查看文件扩展名 - 教程篇
- 【kafka】Kafka消息压缩与解压与相关实验
- SuseLinux详解(3)——开启/关闭防火墙的方法
- 目标检测——SSD的学习笔记
- Unity3D - UGUI组件的中英文对照
- epoll编程实例客户端_深入底层探析网络编程之多路复用器(select,poll,epoll)
- Ruby类的创建与使用
- windows10系统下vue开发环境搭建
- 注册登录后才可以下载的源码_专注爬虫:20个精心总结爬虫项目,爬虫技术这里强(附源码)...
- Windows内存体系(4) -- 内存映射文件
- 文本分类——怎么将二分类模型应用到多分类问题?
- java和javaw进程_java和 javaw 及 javaws的区别解析
- gmx solvate命令
- Selenium 2自动化测试实战
- windows的由来与详细介绍
- word交叉引用后,移动文章结构,修改引用顺序到符合引用先后
- CANoe-CAN通信