css实现9种聊天文字气泡效果代码
代码语言:html
所属分类:布局界面
代码描述:css实现9种聊天文字气泡效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> body{background-color:lightblue;font-family:"Ubuntu-Italic","Lucida Sans",helvetica,sans}.container{padding:5% 5%}.talk-bubble{margin:40px;display:inline-block;position:relative;width:200px;height:auto;background-color:lightyellow}.border{border:8px solid #666}.round{border-radius:30px;-webkit-border-radius:30px;-moz-border-radius:30px}.tri-right.border.left-top:before{content:' ';position:absolute;width:0;height:0;left:-40px;right:auto;top:-8px;bottom:auto;border:32px solid;border-color:#666 transparent transparent transparent}.tri-right.left-top:after{content:' ';position:absolute;width:0;height:0;left:-20px;right:auto;top:0;bottom:auto;border:22px solid;border-color:lightyellow transparent transparent transparent}.tri-right.border.left-in:before{content:' ';position:absolute;width:0;height:0;left:-40px;right:auto;top:30px;bottom:auto;border:20px solid;border-color:#666 #666 transparent transparent}.tri-right.left-in:after{content:' ';position:absolute;width:0;height:0;left:-20px;right:auto;top:38px;bottom:auto;border:12px solid;border-color:lightyellow lightyellow transparent transparent}.tri-right.border.btm-left:before{content:' ';position:absolute;width:0;height:0;left:-8px;right:auto;top:auto;bottom:-40px;border:32px solid;border-color:transparent transparent transparent #666}.tri-right.btm-left:after{content:' ';position:absolute;width:0;height:0;left:0;right:auto;top:auto;bottom:-20px;border:22px solid;border-color:transparent transparent transparent lightyellow}.tri-right.border.btm-left-in:before{content:' ';position:absolute;width:0;height:0;left:30px;right:auto;top:auto;bottom:-40px;border:20px solid;border-color:#666 transparent transparent #666}.tri-right.btm-left-in:after{content:' ';position:absolute;width:0;height:0;left:38px;right:auto;top:auto;bottom:-20px;border:12px solid;border-color:lightyellow transparent transparent lightyellow}.tri-right.border.btm-right-in:before{content:' ';position:absolute;width:0;height:0;left:auto;right:30px;bottom:-40px;border:20px solid;border-color:#666 #666 transparent transparent}.tri-right.btm-right-in:after{content:' ';position:absolute;width:0;height:0;left:auto;right:38px;bottom:-20px;border:12px solid;border-color:lightyellow lightyellow transparent transparent}.tri-right.border.btm-right:before{content:' ';position:absolute;width:0;height:0;left:auto;right:-8px;bottom:-40px;border:20px solid;border-color:#666 #666 transparent transparent}.tri-right.btm-right:after{content:' ';position:absolute;width:0;height:0;left:auto;right:0;bottom:-20px;border:12px solid;border-color:lightyellow lightyellow transparent transparent}.tri-right.border.right-in:before{content:' ';position:absolute;width:0;height:0;left:auto;right:-40px;top:30px;bottom:auto;border:20px solid;border-color:#666 transparent transparent #666}.tri-right.right-in:after{content:' ';position:absolute;width:0;height:0;left:auto;right:-20px;t.........完整代码请登录后点击上方下载按钮下载查看
网友评论0