当你发现好多图都能用css画出来的时候，你就会觉得css很有魅力了。//我是这么觉得的，先不考虑什么兼容问题
像漫画里出现的对话框，往往都是一个对话框然后就加入一个箭头指向说话的那一方，来表示这个内容是谁述说的。
今天认真学了一下：相关资料
首先，要知道一个对话框无非就是一个矩形和一个小三角的契合，想起小学时候教的七巧板；
所以简单来说，只要能制作出矩形和小三角即可；
矩形，一个普通块都可以算得上是矩形了，只要有足够的width和height；
那么三角形呢，这才是难点，起初完全没去研究过原来三角形可以是这么回事，在刚开始接触border的时候，只知道给块画个边框然后就知道了块的大小；
但是border的世界真的是博大精深，当给足了它颜色与宽度，它就有了改变世界的能力。
对于上图，实际的实现也是很简单
1 .div-border{ 2 width: 0px; 3 height: 0px; 4 border-top-color: #ccFF99; 5 border-right-color: #ff0099; 6 border-bottom-color: #00ff99; 7 border-left-color: #9900ff; 8 border-width: 50px; 9 border-style: solid; 10 } 11 .div-trangle{ 12 width: 0px; 13 height: 0px; 14 border-color: transparent #000; 15 border-width: 50px; 16 border-style: solid; 17 }
以上的css，两个类，一个就是实现上图的四种颜色，之所以会这样，颜色由border-color来去定义，而border-width则是边框宽度，针对top边框来说，border-width或者是border-top-width可以说就是最上面那个三角形的高，即直角顶点到水平边的垂直距离；//哎呀，我不想说的那么数学化- -
之所以会变成三角形，也就是因为实际的内容width和高度都变成0了，这个其实可以自行在chrome控制台边控制样式，边查看页面效果。
另外一个类主要区别在于border-color里取了transparent，这个值表示透明，效果自行演示咯。
1 <body> 2 <div style="height:200px;"> 3 <div class="div-border"> 4 5 </div> 6 </div> 7 <div style="height:200px;"> 8 9 <div class="div-trangle"> 10 11 </div> 12 </div> 13 </body>
既然能得到三角形，那么怎么让矩形跟三角形位置上的组合呢？这个就要看html的一个文档流和position概念了，其实我也不是很熟。
大概原理是让矩形具有position:relative的属性， 而让三角形归属与矩形块中，并且拥有position:absolute的属性，此后，三角形就可以通过top ightleftottom属性值的设置来移动三角形对于其父元素矩形的位置，从而达到完美契合。
1 <html> 2 <head> 3 <title>对话框</title> 4 <style type="text/css"> 5 *{ 6 margin: 0; 7 padding: 0; 8 } 9 .div-mid{ 10 margin: 0 auto; 11 width: 800px; 12 height: 600px; 13 } 14 .div-diabox{ 15 width: 200px; 16 border-style: solid; 17 border-width: 1px; 18 border-radius: 10px; 19 border-color: #CCCC33; 20 background-color: #FFFF99; 21 position: relative; 22 margin: 0 auto; 23 padding:30px; 24 top: 30px; 25 } 26 .div-diabox .arrow-bottom-out{ 27 width: 0px; 28 height: 0px; 29 border-style: solid; 30 border-color: #CCCC33 transparent transparent transparent; 31 border-width: 10px; 32 position: absolute; 33 top: 79px; 34 left: 10px; 35 } 36 .div-diabox .arrow-bottom-in{ 37 width: 0px; 38 height: 0px; 39 border-style: solid; 40 border-color: #FFFF99 transparent transparent transparent; 41 border-width: 10px; 42 position: absolute; 43 top: 78px; 44 left: 10px; 45 } 46 .div-diabox .arrow-top-out{ 47 width: 0px; 48 height: 0px; 49 border-style: solid; 50 border-color: transparent transparent #CCCC33 transparent; 51 border-width: 10px; 52 position: absolute; 53 top: -20px; 54 right: 10px; 55 } 56 .div-diabox .arrow-top-in{ 57 width: 0px; 58 height: 0px; 59 border-style: solid; 60 border-color: transparent transparent #FFFF99 transparent; 61 border-width: 10px; 62 position: absolute; 63 top: -19px; 64 right: 10px; 65 } 66 .div-diabox .arrow-right-out{ 67 width: 0px; 68 height: 0px; 69 border-style: solid; 70 border-color: transparent transparent transparent #CCCC33; 71 border-width: 10px; 72 position: absolute; 73 top: 10px; 74 right: -20px; 75 } 76 .div-diabox .arrow-right-in{ 77 width: 0px; 78 height: 0px; 79 border-style: solid; 80 border-color: transparent transparent transparent #FFFF99; 81 border-width: 10px; 82 position: absolute; 83 top: 10px; 84 right: -19px; 85 } 86 .div-diabox .arrow-left-out{ 87 width: 0px; 88 height: 0px; 89 border-style: solid; 90 border-color: transparent #CCCC33 transparent transparent; 91 border-width: 10px; 92 position: absolute; 93 top: 10px; 94 left: -20px; 95 } 96 .div-diabox .arrow-left-in{ 97 width: 0px; 98 height: 0px; 99 border-style: solid; 100 border-color: transparent #FFFF99 transparent transparent; 101 border-width: 10px; 102 position: absolute; 103 top: 10px; 104 left: -19px; 105 } 106 </style> 107 </head> 108 109 <body> 110 <div class="div-mid"> 111 <div class="div-diabox"> 112 <span class="arrow-bottom-out"></span> 113 <span class="arrow-bottom-in"></span> 114 雷猴码 115 </div> 116 <br/> 117 <br /> 118 <div class="div-diabox"> 119 <span class="arrow-top-out"></span> 120 <span class="arrow-top-in"></span> 121 雷猴码 122 </div> 123 <br/> 124 <br /> 125 <div class="div-diabox"> 126 <span class="arrow-right-out"></span> 127 <span class="arrow-right-in"></span> 128 雷猴码 129 </div> 130 <br/> 131 <br /> 132 <div class="div-diabox"> 133 <span class="arrow-left-out"></span> 134 <span class="arrow-left-in"></span> 135 雷猴码 136 </div> 137 138 </div> 139 </body> 140 </html>
效果图：
当时看到这个效果的时候，还没自己实现之前，就有一个疑问，那就是三角形的颜色问题，因为三角形就是一个border,一条边而不是一个块，不能拥有多种颜色，所以实际上一个border只是一个实心颜色的图形，那怎么办呢？
解决方案是复制多一个border三角形，当然颜色要不同，只要让其位置上重叠，底部着漏出一点边，从而达到有边效果的三角形（实际是重叠的两个三角形）。
关于位置移动问题，我觉得自己研究还是挺好玩的，不过就是没拿到诀窍的感觉，还是要自己去算一下。