[摘录]纯CSS打造箭头对话框效果
有在使用Facebook的朋友,应该会发现到,自从Facebook将条列式改成时间轴的架构后,每当发表新讯息时,每个讯息都会像对框话的形式来呈现,虽然说这不是什么新技术,但先前梅干都是将那对话框的,三角形制作成图档,再将它定位显示到该显示的任置,虽然说没什么问题,但若中间突然修改的颜色或边框时,这下就得重新再绘制一次,因此梅干便在想,或许可用Html5来绘制那三角形,如此一来就可省去,每当色彩改变时,重制的麻烦,但就目前Html5的部分,使用上还是相当的受限,因此梅干爬了一些文章,找到一个相当棒的作法,竟然直接用CSS的语法就可实作出来,这还真是让梅干想都没想到,竟然可以这样子用,而梅干也花了点时间,将对话框四个上向箭头的CSS给设定好了,因此各位可以直接套用喔!
首先,先定义一个边框的样式与色彩。
由于边框是由内向外画,且会看到个边的接角,正好都是45度角。
接着再将宽、高设成0。
有没有点感觉啦!
这时再把其它边的颜色改成透明。
三角形出现啦!而有了这概念后,就可以开始来制作对话框了。
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 >
效果如下:
相关推荐
jiedinghui 2020-10-25
Ladyseven 2020-10-22
zuncle 2020-09-28
xiaohuli 2020-09-02
葉無聞 2020-09-01
nicepainkiller 2020-08-20
AlisaClass 2020-08-09
myloveqiqi 2020-08-09
buttonChan 2020-08-02
drdrsky 2020-07-29
Ladyseven 2020-07-25
nicepainkiller 2020-07-24
AlisaClass 2020-07-19
hellowzm 2020-07-19
background-color: blue;background-color: yellow;<input type="button" value="变蓝" @click="changeColorT
昔人已老 2020-07-19
骆驼的自白 2020-07-18
lanzhusiyu 2020-07-19
hellowzm 2020-07-19
CSSEIKOCS 2020-07-18