css实现9种聊天文字气泡效果代码-html代码-BFW代码库

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.........完整代码请登录后点击上方下载按钮下载查看