html5/Css 聊天框素材

来源：互联网发布：vb编程软件编辑：程序博客网时间：2024/05/16 11:07
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>对话框</title>    <style>        *{            margin: 0px;            padding: 0px;        }        .box{            width: 200px;            height: 40px;            text-align: center;            line-height: 40px;            border-radius: 5px;            background: orange;            margin: 100px auto;            box-shadow: 2px 3px 0 #666666;            position: relative;        }        .box:after{            content: "\200B";            display: block;            width: 0;            height: 0;            border: 10px solid transparent;            border-right: 10px solid orange;            position: absolute;            left: -20px;            top: 7px;        }        .box1{            width: 170px;            height: 40px;            line-height: 40px;            background: green;            margin: 40px auto;            border-radius: 5px;            text-align: center;            box-shadow:0px 0px 22px #f00;            position: relative;        }        .box1:after{            content: "\200B";            display: block;            width: 0;            height: 0;            border: 10px solid transparent;            border-left: 10px solid green;            position: absolute;            right: -20px;            top: 7px;        }    </style></head><body>    <p class="box">聊天框！</p>    <p class="box1">聊天框！</p></body></html>
阅读全文
0 0