[摘录]纯CSS打造箭头对话框效果

libowen0 2014-07-08

有在使用Facebook的朋友,应该会发现到,自从Facebook将条列式改成时间轴的架构后,每当发表新讯息时,每个讯息都会像对框话的形式来呈现,虽然说这不是什么新技术,但先前梅干都是将那对话框的,三角形制作成图档,再将它定位显示到该显示的任置,虽然说没什么问题,但若中间突然修改的颜色或边框时,这下就得重新再绘制一次,因此梅干便在想,或许可用Html5来绘制那三角形,如此一来就可省去,每当色彩改变时,重制的麻烦,但就目前Html5的部分,使用上还是相当的受限,因此梅干爬了一些文章,找到一个相当棒的作法,竟然直接用CSS的语法就可实作出来,这还真是让梅干想都没想到,竟然可以这样子用,而梅干也花了点时间,将对话框四个上向箭头的CSS给设定好了,因此各位可以直接套用喔!

[摘录]纯CSS打造箭头对话框效果

首先,先定义一个边框的样式与色彩。

[摘录]纯CSS打造箭头对话框效果

由于边框是由内向外画,且会看到个边的接角,正好都是45度角。

[摘录]纯CSS打造箭头对话框效果

接着再将宽、高设成0。

[摘录]纯CSS打造箭头对话框效果

有没有点感觉啦!

[摘录]纯CSS打造箭头对话框效果

这时再把其它边的颜色改成透明。

[摘录]纯CSS打造箭头对话框效果

三角形出现啦!而有了这概念后,就可以开始来制作对话框了。

[摘录]纯CSS打造箭头对话框效果

CSS样式如下:

<style type = "text/css" > 
.mwt_border { 
	width : 250px ; 
	height : 90px ; 
	text-align : center ; 
	background : #fff ; 
	position : relative ; 
	border :  solid  1px  #333 ; 
	margin : 30px ; 
	padding : 30px ; 
} 
/*箭头右*/ 
.mwt_border .arrow_r_int { 
	width : 0px ; 
	height : 0px ; 
	border-width : 15px ; 
	border-style : solid ; 
	border-color : transparent  transparent transparent  #333 ; 
	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  #fff ; 
	position : absolute ; 
	top : 20 % ; 
	right : -29px ; 
}
 
/*箭头左*/ 
.mwt_border .arrow_l_int { 
	width : 0px ; 
	height : 0px ; 
	border-width : 15px ; 
	border-style : solid ; 
	border-color : transparent  #333  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  #fff  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 #333  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 #fff  transparent  ; 
	position : absolute ; 
	top : -29px ; 
	left : 40px ; 
}
 
/*箭头下*/ 
.mwt_border .arrow_b_int { 
	width : 0px ; 
	height : 0px ; 
	border-width : 15px ; 
	border-style : solid ; 
	border-color : #333  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 : #fff  transparent  transparent  transparent  ; 
	position : absolute ; 
	bottom : -29px ; 
	right : 50px ; 
}
 
</style >

HTML结构如下:

<div class = "mwt_border" > 
	<span class = "arrow_t_int" > </span > 
    <span class = "arrow_t_out" > </span >
	CSS制作对话框效果-箭头上
</div >
 
<div class = "mwt_border" > 
	<span class = "arrow_r_int" > </span > 
    <span class = "arrow_r_out" > </span >
	CSS制作对话框效果-箭头右
</div >
 
<div class = "mwt_border" > 
	<span class = "arrow_b_int" > </span > 
    <span class = "arrow_b_out" > </span >
	CSS制作对话框效果-箭头下
</div >
 
 
<div class = "mwt_border" > 
	<span class = "arrow_l_int" > </span > 
    <span class = "arrow_l_out" > </span >
	CSS制作对话框效果-箭头左
</div >

效果如下:

[摘录]纯CSS打造箭头对话框效果

相关推荐

aSuncat / 0评论 2020-08-18