CSS3实现三角形和对话框
这是最终实现的效果，类似于微信对话框的样式。
分析一下这个对话框的结构，由一个小三角形和一个长方形构成。长方形很容易就可以实现，重点是如何用CSS3做出一个小三角形。
一、如何生成一个三角形
总结：三角形是由设置宽度高度为0，由边框构成的正方形，分别设置边框四个边的样式，得到四个三角形拼凑在一起的效果，再设置其他方向上的边框颜色为透明色。
1、首先先做一个正方形，这个正方形不是一般的元素加上背景颜色实现的，而是对一个元素将其长和宽都设置0px，这样就相当于盒子的内容区消失。content：" ";
.box{
border:50px solid #aff;
width: 0px;height:0px;
margin:50px auto;
}
2、然后再单独设置每一条边框的样式，就可以看到出现了四个三角形拼凑在一起的效果。
.box{
border-top:100px solid #aff;
border-left:100px solid #faf;
border-right:100px solid #afa;
border-bottom:100px solid #ffa;
width: 0px;height:0px;margin:50px auto;
}
3、获得单个的三角形，取一半边框，其他边框的颜色设置为透明 transparent
这样就获得了一个三角形。
二、制作一个对话框
对话框设置圆角border-radius；文字距离边框还有一定距离所以要设置内边距 padding；文本内容垂直居中line-height；
::before伪元素在元素前面添加内容；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.main{
background-color: #6a6;
margin:50px auto;padding:16px;
width:200px;height:25px;
border-radius: 10px;line-height: 25px;
position: relative;
}
.main::before{
content:" ";
border-left: 0px solid #6a6;
border-top:10px solid transparent;
border-right:10px solid #6a6;
border-bottom:10px solid transparent;
position: absolute;left:-10px;top:18px;
}
/*::before伪元素在元素前面添加内容;*/
</style>
</head>
<body>
<div class="main">Hello World ! </div>
</body>
</html>
CSS3实现三角形和对话框的更多相关文章
- css3画三角形的原理
以前用过css3画过下拉菜单里文字后面的“下拉三角符号”,类似于下面这张图片文字后面三角符号的效果 下面是一个很简单的向上的三角形代码 #triangle-up { width: 0; height: ...
- pure CSS3 实现三角形icon的方法
pure CSS3 实现三角形icon的方法 border: color+transparent transform : rotate() /rotateZ() ? 使用 实体字符"◆&qu ...
- CSS3实现三角形
很多时候我们用到三角形这个效果: 我们可以用CSS3实现这个效果,怎去做呢?先阐述一下原理,我们定义一个空的div,设置这个div宽高为0,给这个div加上一个100px边框(这里是方便观察),得到的 ...
- 怎么利用CSS3绘制三角形
最近三角形挺火,很多地方都能碰到,如网页,微信,或者QQ空间的时间轴等地方都能看到,而且这些并不是图片插入进去的,那就需要用CSS来做了 <p class="bbb"> ...
- CSS3画三角形原理
1.首先看一下画出一个下三角形完整的代码及效果图 #trangle1-up{ width:; height:; border-left:50px solid transparent; border-r ...
- CSS3中三角形及三角形组合图实现
几何之三角形及三角形的组合图案理论 三角形( triangle ['traɪæŋɡl])可以看成正方形对角线交叉形成的图形 若想得到编号①方向向下三角形,只需对编号②③④三角形让其透明tran ...
- 使用CSS3制作三角形小图标
话不多说,直接写代码,希望能够对大家有所帮助! 1.html代码如下: <a href="#" class="usetohover"> <di ...
- 分享一个css3写的气泡对话框,适合于即时通讯和留言本的动态内容
效果预览: css code .message_content{width:100%;margin-top:10px;clear:both;float:left;} .face{float:left; ...
- css3实现三角形，聊天背景气泡，心形等形状
1.聊天背景气泡: css代码如下: #talkbubble {width: 120px;margin:auto; background: red; position: relative; -moz- ...
随机推荐
- golang 导出CSV文件中文乱码的问题
golang 导出CSV文件中文乱码的问题 解决办法: 在csv文件的开头写入 UTF-8 BOM // 创建文件 dstf, err := os.Create("./data/" ...
- windows 使用Docker Desktop 使用国内镜像
===新增一些比较给力的镜像=== 1.中科大镜像加速地址 https://docker.mirrors.ustc.edu.cn 2.阿里云镜像服务 ========= 原本在配置项中添加了:国内镜像 ...
- 安装iamp模块,编译报错configure: error: Cannot find imap library (libc-client.a). Please check your c-client installation.
yum install libc-client-devel cd /root/lnmp1.0-full/php-5.3.17/ext/imap /usr/local/php/bin/phpize ./ ...
- xmake v2.2.9 发布, 新增c++20 modules的实验性支持
这个版本没啥太大新特性,主要对c++20 modules进行了实验性支持,目前支持clang/msvc编译器,除此之外改进了不少使用体验,并且提高了一些稳定性. 另外,这个版本新增了socket.io ...
- Flask框架 （四）—— 请求上下文源码分析、g对象、第三方插件（flask_session、flask_script、wtforms）、信号
Flask框架 (四)—— 请求上下文源码分析.g对象.第三方插件(flask_session.flask_script.wtforms).信号 目录 请求上下文源码分析.g对象.第三方插件(flas ...
- mysql 登录和退出 和简单得操作命令
{} 是必须要有得,[]是可有,可没有得... SHOW WARNINGS (查看警告信息) SHOW CREATE DATABASE T1; (查看数据得创建sql语句)
- for语句与if语句嵌套的简单应用
1.循环语句 for(初始条件:循环条件:状态改变) { 循环体 } break为跳出循环,continue为结束此次循环. 2.死循环常用while语句 while(判断语句) { if(判断) { ...
- 牛客练习赛46 E 华华和奕奕学物理 （树状数组）
https://ac.nowcoder.com/acm/contest/894/E 一开始写了一个简单的模拟 通过率只有5%...... 看题解真的理解了好久!!肥宅大哭orz 题解如下 最后一句:“ ...
- 主机(windows10)虚拟机(ubuntu18)arm板(linux3.4)相互ping通
实际中在主机上安装虚拟机,并在主机上通过网线连接arm板进行调试. 用网线将主机和arm板直接物理连接,且主机和arm必须处于同一个网段.(我们知道主机中的网卡具有路由器的功能) 其中arm板IP地址 ...
- AcWing 875. 快速幂
题目链接:https://www.acwing.com/problem/content/description/877/ 快速幂模板题,计算ab mod p 的值,a,b,p大概1e9左右,可以快速计 ...