css制作对话框

当你发现好多图都能用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\right\left\bottom属性值的设置来移动三角形对于其父元素矩形的位置,从而达到完美契合。

  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三角形,当然颜色要不同,只要让其位置上重叠,底部着漏出一点边,从而达到有边效果的三角形(实际是重叠的两个三角形)。

 

关于位置移动问题,我觉得自己研究还是挺好玩的,不过就是没拿到诀窍的感觉,还是要自己去算一下。

 

 

posted @ 2014-04-25 00:11 Dont 阅读(...) 评论(...) 编辑 收藏