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

2024年1月8日发(作者：)

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 ;

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 ;

}

HTML结构如下：

效果如下：