这是最终实现的效果，类似于微信对话框的样式。

分析一下这个对话框的结构，由一个小三角形和一个长方形构成。长方形很容易就可以实现，重点是如何用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实现三角形和对话框的更多相关文章

  1. css3画三角形的原理

    以前用过css3画过下拉菜单里文字后面的“下拉三角符号”,类似于下面这张图片文字后面三角符号的效果 下面是一个很简单的向上的三角形代码 #triangle-up { width: 0; height: ...

  2. pure CSS3 实现三角形icon的方法

    pure CSS3 实现三角形icon的方法 border: color+transparent transform : rotate() /rotateZ() ? 使用 实体字符"◆&qu ...

  3. CSS3实现三角形

    很多时候我们用到三角形这个效果: 我们可以用CSS3实现这个效果,怎去做呢?先阐述一下原理,我们定义一个空的div,设置这个div宽高为0,给这个div加上一个100px边框(这里是方便观察),得到的 ...

  4. 怎么利用CSS3绘制三角形

    最近三角形挺火,很多地方都能碰到,如网页,微信,或者QQ空间的时间轴等地方都能看到,而且这些并不是图片插入进去的,那就需要用CSS来做了 <p class="bbb"> ...

  5. CSS3画三角形原理

    1.首先看一下画出一个下三角形完整的代码及效果图 #trangle1-up{ width:; height:; border-left:50px solid transparent; border-r ...

  6. CSS3中三角形及三角形组合图实现

        几何之三角形及三角形的组合图案理论 三角形( triangle ['traɪæŋɡl])可以看成正方形对角线交叉形成的图形 若想得到编号①方向向下三角形,只需对编号②③④三角形让其透明tran ...

  7. 使用CSS3制作三角形小图标

    话不多说,直接写代码,希望能够对大家有所帮助! 1.html代码如下: <a href="#" class="usetohover"> <di ...

  8. 分享一个css3写的气泡对话框,适合于即时通讯和留言本的动态内容

    效果预览: css code .message_content{width:100%;margin-top:10px;clear:both;float:left;} .face{float:left; ...

  9. css3实现三角形，聊天背景气泡，心形等形状

    1.聊天背景气泡: css代码如下: #talkbubble {width: 120px;margin:auto; background: red; position: relative; -moz- ...

随机推荐

  1. Java 语言特性之 Annotation 注解

    利用 Java 的反射机制,可以在运行时获取 Java 类的注解信息. 注解 注解的特性 注解是 Java 5 的一个新特性,是插入代码中的一种注释或者说是元数据.注解并不是程序代码,可以对程序作出解 ...

  2. Django-DRF组件学习-路由学习

    1.路由router 对于视图集ViewSet,我们除了可以自己手动指明请求方式与动作action之间的对应关系外,还可以使用Routers来帮助我们快速实现路由信息. REST framework提 ...

  3. numpy2

    1.通用函数,是一种在ndarray数据中进行逐元素操作的函数.某些函数接受一个或多个标量数值,并产生一个或多个标量结果,通用函数就是对这些函数的封装. 1.常用的一元通用函数有:abs\fabs s ...

  4. call 和 apply的定义和区别？

    1.方法定义 call方法: 语法:call([thisObj[,arg1[, arg2[,   [,.argN]]]]]) 定义:调用一个对象的一个方法,以另一个对象替换当前对象. 说明: call ...

  5. python+selenium下载文件——firefox

    修改Firefox的相关配置. 1.profile.set_preference('browser.download.folderList',2) 设置成0代表桌面,1代表下载到浏览器默认下载路径:2 ...

  6. 文件类型 | 命令ln | 软链接硬链接

    1.9文件类型 1.9.1常见文件类型 d:目录 -:普通文件 l:链接文件 b:设备 1.9.2文件后缀名 sh:shell脚本 tar.gz:压缩包 my.cnf:配置文件 test.zip:压缩 ...

  7. Dubbo原理学习

    Dubbo源码及原理学习 阿里中间件团队博客 Dubbo官网 Dubbo源码解析 Dubbo源码解析-掘金 Dubbo源码解析-赵计刚 Dubbo系列 源码总结+最近感悟

  8. 使用Oracle12c 以上的PDB创建数据库用户 密码过期的简单处理

    1. 先通过监听查看PDB的名字 Windows 打开命令行: 输入命令 lsnrctl status 一般在如图示的最下面 2. 也可以通过GS的全局配置文件来查看 数据库连接SID信息. C:\P ...

  9. 【监控笔记】【2.3】扩展事件——慢查询SQL（执行超过3S的SQL）

    --sql server 2008及以上才支持,2012及以上才支持GUI界面 msdn 扩展事件:点击打开链接 [1]T-SQL实现 基于 rpc_completed(远程过程调用已完成时发生) 事 ...

  10. 索引之----mysql联合索引

    重要概念: 1．对于mysql来说,一条sql中,一个表无论其蕴含的索引有多少,但是有且只用一条. 2．对于多列索引来说(a,b,c)其相当于3个索引(a),(a,b),(a,b,c)3个索引,又由于 ...