利用trasform属性和border实现对话框下三角效果

今天分别利用trasform属性和border实现对话框下三角效果

（由于◆ 方法较为简单，就没有列出）

1、

利用border的效果实现：

HTML：

CSS：

.message_box{

position: relative;

width: 240px;

height: 60px;

line-height:60px;

background: #009999;

box-shadow: 1px 2px 3px #009999;

border: 1px solid #098483;

border-radius:4px;

text-align: center;

color: #000000;

margin-bottom: 20px;

}

.tr_border{

position: absolute;

left: 30px;

overflow: hidden;

width: 0;

height: 0;

border-width: 10px;

border-style: solid dashed dashed dashed;

}

.tr_border{

bottom: -20px;

border-color: #098483 transparent transparent transparent;

}

.tr_bg{

bottom: -19px;

border-color: #098483 transparent transparent transparent;

}

效果：

2、利用transform属性实现：

HTML：

CSS：

.message_box{

position: relative;

width: 240px;

height: 60px;

line-height:60px;

background: #009999;

box-shadow: 1px 2px 3px #009999;

border: 1px solid #098483;

border-radius:4px;

text-align: center;

color: #000000;

margin-bottom: 20px;

}

.transform{

position: absolute;

bottom: -8px;

bottom: -6px;

left: 30px;

overflow: hidden;

width: 13px;

height: 13px;

background: #009999;

border-bottom: 1px solid #098483;

border-right: 1px solid #098483;

-webkit-transform:rotate(45deg);

-moz-transform:rotate(45deg);

-o-transform:rotate(45deg);

transform:rotate(45deg);

}

效果：