今天完成的事情：写了电话联系的显示隐藏效果，把左边的号码做成了气泡。写了游戏页面。

明天计划的事情：调样式

遇到的问题：怎么把页面写得和psd图一样？按照网页上的psd图给的数值写，实际展示出来的效果和psd图不一样。

收获：三角形的写法，带阴影效果的三角形，气泡的写法

三角形的写法

向右的三角形：需要一个父元素和一个子元素

<div class="triangle_border_right">
    <span></span>
</div>

.triangle_border_right{

    width:0;

    height:0;

    border-width:30px 0 30px 30px;

    border-style:solid;

    border-color:transparent transparent transparent #333;/*透明 透明 透明 灰*/

    margin:40px auto;

    position:relative;

}

.triangle_border_right span{

    display:block;

    width:0;

    height:0;

    border-width:28px 0 28px 28px;

    border-style:solid;

    border-color:transparent transparent transparent #fc0;/*透明 透明 透明 黄*/

    position:absolute;

    top:-28px;

    left:-29px;

}

带阴影效果的三角形

用将width和height设置为0，通过border特性来实现三角形的效果的方法，想必很多人都实现过。 

但是如果要求三角形边缘具有阴影效果，这样一来以前的实现方式显然是不行，因为box-shadow属性对border内部的边缘是没有效果的。 

实现的关键就是给border-top和border-right两个三角形同时设置颜色，将两个小三角形融合成一个大的三角形，然后通过transform进行旋转操作，将盒模型原本的两条边作为三角形的腰，对外展示，再对其设置box-shadow效果，实现阴影效果。

气泡的写法

<div class="arrow"></div>

<style type="text/css">

.arrow {

width:0;

height:0;

font-size:0;

border:solid 10px;

border-color:#f00 #0f0 #00f #000;

}

</style>

当div的宽度和高度都是0的时候，它的整个边框是由四个三角形组成的，每一边为一个三角形，利用这个特点，来做小尖角。我们只要把不需要的三边的边框（三角形）的颜色设置为与背景相同即可，这样就只能看到你想要的那个三角形了，然后再利用定位调整一下位置就可以了。

完整的气泡写法 

<div class="send">
    <div class="arrow"></div>
</div>

<style type="text/css">

body {

background:#4D4948;

}

.send {

position:relative;

width:150px;

height:35px;

background:#F8C301;

border-radius:5px; /* 圆角 */

margin:30px auto 0;

}

.send .arrow {

position:absolute;

top:5px;

right:-16px; /* 圆角的位置需要细心调试哦 */

width:0;

height:0;

font-size:0;

border:solid 8px;

border-color:#4D4948 #4D4948 #4D4948 #F8C301;

}

</style>