使用CSS制作DotBlog对话框效果签名档

小弟最近发现原来文章推荐数有点少(文章写得太没内容…orz)，所以只好用哀兵策略，跪求看完文章的大大们给点指教或按个推荐之类的，想说来弄个签名档提醒大家一下吧

刚好之前有看到梅问题用CSS做对话框的效果

这边使用他教学的范例做了一些小修正后搭配了图片写成下面的html与CSS

<!--签名档CSS-->
<style type="text/css">
.mwt_border{
width: 250px;
height: 40px;
text-align: center;
color: #fff;
background: #252525;
position: relative;
border: solid 1px #252525;
margin-left: 80px;
top: -50px;
padding: 0px;
}
/*箭头右*/
.mwt_border .arrow_r_int{
    width:0px;
    height:0px;
    border-width:15px;
    border-style:solid;
    border-color:transparent transparent transparent #252525;
    position:absolute;
    top:20%;
    right:-30px;
}
/*箭头右-边框*/
.mwt_border .arrow_r_out{
    width:0px;
    height:0px;
    border-width:15px;
    border-style:solid;
    border-color:transparent transparent transparent #252525;
    position:absolute;
    top:20%;
    right:-29px;
}

/*箭头左*/
.mwt_border .arrow_l_int{
    width:0px;
    height:0px;
    border-width:15px;
    border-style:solid;
    border-color:transparent #252525 transparent  transparent ;
    position:absolute;
    top:20%;
    left:-30px;
}
/*箭头左-边框*/
.mwt_border .arrow_l_out{
    width:0px;
    height:0px;
    border-width:15px;
    border-style:solid;
    border-color:transparent #252525 transparent transparent ;
    position:absolute;
    top:20%;
    left:-29px;
}

/*箭头上*/
.mwt_border .arrow_t_int{
    width:0px;
    height:0px;
    border-width:15px;
    border-style:solid;
    border-color:transparent transparent #252525 transparent ;
    position:absolute;
    top:-30px;
    left:40px;
}
/*箭头上-边框*/
.mwt_border .arrow_t_out{
    width:0px;
    height:0px;
    border-width:15px;
    border-style:solid;
    border-color:transparent transparent #252525 transparent ;
    position:absolute;
    top:-29px;
    left:40px;
}

/*箭头下*/
.mwt_border .arrow_b_int{
    width:0px;
    height:0px;
    border-width:15px;
    border-style:solid;
    border-color:#252525 transparent transparent transparent ;
    position:absolute;
    bottom:-30px;
    right:50px;
}
/*箭头下-边框*/
.mwt_border .arrow_b_out{
    width:0px;
    height:0px;
    border-width:15px;
    border-style:solid;
    border-color:#252525 transparent transparent transparent ;
    position:absolute;
    bottom:-29px;
    right:50px;
}</style>
<!--签名档HTML(http://www.minwt.com/css/8996.html)-->
<hr />
<div class="signature">
    <img alt="" src="http://dl.dropboxusercontent.com/u/20925528/%E6%8A%80%E8%A1%93Blog/images/profile2.jpg" style="width: 60px; height: 60px;" />
    <div class="mwt_border">
    <span class="arrow_l_int"></span>
    <span class="arrow_l_out"></span>
    如果觉得文章还不错麻烦请在文章最上面给予推荐，你的支持是小弟继续努力产出的动力！</div>
</div>

将上面的的内容贴到后台组态设定的文章签名档中的Source内(如下图)

 

<span class="arrow_l_int"></span>
<span class="arrow_l_out"></span>