css制作对话框
当你发现好多图都能用css画出来的时候，你就会觉得css很有魅力了。//我是这么觉得的，先不考虑什么兼容问题
像漫画里出现的对话框，往往都是一个对话框然后就加入一个箭头指向说话的那一方，来表示这个内容是谁述说的。
今天认真学了一下：相关资料
首先，要知道一个对话框无非就是一个矩形和一个小三角的契合，想起小学时候教的七巧板；
所以简单来说，只要能制作出矩形和小三角即可；
矩形，一个普通块都可以算得上是矩形了，只要有足够的width和height；
那么三角形呢，这才是难点，起初完全没去研究过原来三角形可以是这么回事，在刚开始接触border的时候，只知道给块画个边框然后就知道了块的大小；
但是border的世界真的是博大精深，当给足了它颜色与宽度，它就有了改变世界的能力。
对于上图，实际的实现也是很简单
.div-border{
width: 0px;
height: 0px;
border-top-color: #ccFF99;
border-right-color: #ff0099;
border-bottom-color: #00ff99;
border-left-color: #9900ff;
border-width: 50px;
border-style: solid;
}
.div-trangle{
width: 0px;
height: 0px;
border-color: transparent #000;
border-width: 50px;
border-style: solid;
}
以上的css，两个类，一个就是实现上图的四种颜色，之所以会这样，颜色由border-color来去定义，而border-width则是边框宽度，针对top边框来说，border-width或者是border-top-width可以说就是最上面那个三角形的高，即直角顶点到水平边的垂直距离；//哎呀，我不想说的那么数学化- -
之所以会变成三角形，也就是因为实际的内容width和高度都变成0了，这个其实可以自行在chrome控制台边控制样式，边查看页面效果。
另外一个类主要区别在于border-color里取了transparent，这个值表示透明，效果自行演示咯。
<body>
<div style="height:200px;">
<div class="div-border"> </div>
</div>
<div style="height:200px;"> <div class="div-trangle"> </div>
</div>
</body>
既然能得到三角形，那么怎么让矩形跟三角形位置上的组合呢？这个就要看html的一个文档流和position概念了，其实我也不是很熟。
大概原理是让矩形具有position:relative的属性， 而让三角形归属与矩形块中，并且拥有position:absolute的属性，此后，三角形就可以通过top\right\left\bottom属性值的设置来移动三角形对于其父元素矩形的位置，从而达到完美契合。
<html>
<head>
<title>对话框</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.div-mid{
margin: 0 auto;
width: 800px;
height: 600px;
}
.div-diabox{
width: 200px;
border-style: solid;
border-width: 1px;
border-radius: 10px;
border-color: #CCCC33;
background-color: #FFFF99;
position: relative;
margin: 0 auto;
padding:30px;
top: 30px;
}
.div-diabox .arrow-bottom-out{
width: 0px;
height: 0px;
border-style: solid;
border-color: #CCCC33 transparent transparent transparent;
border-width: 10px;
position: absolute;
top: 79px;
left: 10px;
}
.div-diabox .arrow-bottom-in{
width: 0px;
height: 0px;
border-style: solid;
border-color: #FFFF99 transparent transparent transparent;
border-width: 10px;
position: absolute;
top: 78px;
left: 10px;
}
.div-diabox .arrow-top-out{
width: 0px;
height: 0px;
border-style: solid;
border-color: transparent transparent #CCCC33 transparent;
border-width: 10px;
position: absolute;
top: -20px;
right: 10px;
}
.div-diabox .arrow-top-in{
width: 0px;
height: 0px;
border-style: solid;
border-color: transparent transparent #FFFF99 transparent;
border-width: 10px;
position: absolute;
top: -19px;
right: 10px;
}
.div-diabox .arrow-right-out{
width: 0px;
height: 0px;
border-style: solid;
border-color: transparent transparent transparent #CCCC33;
border-width: 10px;
position: absolute;
top: 10px;
right: -20px;
}
.div-diabox .arrow-right-in{
width: 0px;
height: 0px;
border-style: solid;
border-color: transparent transparent transparent #FFFF99;
border-width: 10px;
position: absolute;
top: 10px;
right: -19px;
}
.div-diabox .arrow-left-out{
width: 0px;
height: 0px;
border-style: solid;
border-color: transparent #CCCC33 transparent transparent;
border-width: 10px;
position: absolute;
top: 10px;
left: -20px;
}
.div-diabox .arrow-left-in{
width: 0px;
height: 0px;
border-style: solid;
border-color: transparent #FFFF99 transparent transparent;
border-width: 10px;
position: absolute;
top: 10px;
left: -19px;
}
</style>
</head> <body>
<div class="div-mid">
<div class="div-diabox">
<span class="arrow-bottom-out"></span>
<span class="arrow-bottom-in"></span>
雷猴码
</div>
<br/>
<br />
<div class="div-diabox">
<span class="arrow-top-out"></span>
<span class="arrow-top-in"></span>
雷猴码
</div>
<br/>
<br />
<div class="div-diabox">
<span class="arrow-right-out"></span>
<span class="arrow-right-in"></span>
雷猴码
</div>
<br/>
<br />
<div class="div-diabox">
<span class="arrow-left-out"></span>
<span class="arrow-left-in"></span>
雷猴码
</div> </div>
</body>
</html>
效果图：
当时看到这个效果的时候，还没自己实现之前，就有一个疑问，那就是三角形的颜色问题，因为三角形就是一个border,一条边而不是一个块，不能拥有多种颜色，所以实际上一个border只是一个实心颜色的图形，那怎么办呢？
解决方案是复制多一个border三角形，当然颜色要不同，只要让其位置上重叠，底部着漏出一点边，从而达到有边效果的三角形（实际是重叠的两个三角形）。
关于位置移动问题，我觉得自己研究还是挺好玩的，不过就是没拿到诀窍的感觉，还是要自己去算一下。
css制作对话框的更多相关文章
- 【2048小游戏】——CSS/原生js爬坑之纯CSS模态对话框&游戏结束
引言:2048小游戏的结束界面,使用纯CSS制作模态对话框,一般做模态对话框都会使用BootStrap自带的模态对话框组件方便使用,但在制作要运行在移动端的小项目时,就不能使用BootStrap,因为 ...
- CSS制作三角形和按钮
CSS制作三角形和按钮 用上一篇博文中关于边框样式的知识点,能制作出三角形和按钮. 我先说如何制作三角形吧,相信大家在平时逛网站的时候都会看到一些导航栏中的三角形吧,比如说: 网易首页的头部菜单栏中, ...
- 前端开发css实战：使用css制作网页中的多级菜单
前端开发css实战:使用css制作网页中的多级菜单 在日常工作中,大家都会遇到一些显示隐藏类菜单,比如页头导航.二维码显示隐藏.文本提示等等......而这些效果都是可以使用纯css实现的(而且非常简 ...
- css制作漂亮彩带导航条菜单
点击这里查看效果:http://keleyi.com/keleyi/phtml/divcss/17.htm 效果图: 以下是源代码: <!DOCTYPE html PUBLIC "-/ ...
- CSS 制作三角形原理剖析
使用css制作三角形其实原理很简单,下面一步步解析. 1.html代码如下 <div class="triangle"> </div> 2.CSS代码 .t ...
- 纯CSS制作水平垂直居中“十字架”
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- jQuery & CSS 制作金属质感的选择按钮
如果能把 CSS 运用好,我们创作出好的交互和效果的可能性大大增加.这篇文章中,我想与大家分享一组结合 jQuery & CSS 制作的充满金属质感的选择框效果,绝对是超级精美的效果. 在线演 ...
- DIV+CSS制作二级横向弹出菜单，略简单
没有使用JavaScript控制二级菜单的显示,结果如上图所示. 代码如下: <!DOCTYPE html> <html> <head> <meta char ...
- 纯CSS制作三角（转）
原原文地址:http://www.w3cplus.com/code/303.html 原文地址:http://blog.csdn.net/dyllove98/article/details/89670 ...
随机推荐
- Ubuntu下安装MySQL-python教程
http://blog.csdn.net/liushuaikobe/article/details/8586224 写得非常的好,也很详细. 有密码:mysql -u root -p 无密码:mysq ...
- sh5.while 脚本练习
脚本编程: 顺序结构 选择结构 if, case 循环结构 for,while,until while循环:适用于循环次数未知的场景 语法: while CONDITION;do statement ...
- IE8下导入EXCEL数据传到客户端以附件下载
IE8下导入EXCEL数据传到客户端以附件下载方式出现,而不显示数据,解决方法:以text/html格式返回. HttpResponseMessage message = new HttpRespon ...
- python 学习笔记7 面向对象编程
一.概述 面向过程:根据业务逻辑从上到下写垒代码 函数式:将某功能代码封装到函数中,日后便无需重复编写,仅调用函数即可 面向对象:对函数进行分类和封装,让开发"更快更好更强..." ...
- [UWP]UWP App Data存储和获取
这篇博客介绍如何在UWP开发时,如何存储App Data和获取. App Data是指用户的一些设定,偏好等.例如,App的主题,是否接收推送,离线接收消息等.需要区分下App Data和User D ...
- Flash: An Efficient and Portable Web Server
Introduction This paper presents the design of a new Web server architecture called the asymmetric m ...
- SpringMVC(二) SpringMVC Hello World
准备条件: STS(集成了Spring相关工具的Eclipse) Spring软件包 spring-framework-4.3.3.RELEASE-dist.zip. 步骤: 加入jar包. Ecli ...
- JavaScript(三) 正则表达式 以及实现的功能
RegExp 是正则表达式的缩写.定义RegExp正则表达式 RegExp 对象用于存储检索模式. 通过 new 关键词来定义 RegExp 对象.以下代码定义了名为 p 的 RegExp 对象,其模 ...
- 切图时图片的选择：JPG、PNG、GIF的区别
目前网站图片的采用一共有流行三种,分别是JPG.PNG.GIF,然而很多人并不知道三者在选择的时候究竟应该选谁.虽然都可以存储图片,但是如果要发布到网上,就必须考虑速度.大小和失真程度的问题.如果你运 ...
- POJ2104 K-th Number（主席树）
题目 Source http://poj.org/problem?id=2104 Description You are working for Macrohard company in data s ...