css模拟对话框

来源：互联网发布：ubuntu ftp上传文件编辑：程序博客网时间：2024/06/03 21:57

使用背景图制作对话框

.live-chat-tipbox{    position: absolute;    top: -100px;    right: 10px;    width: 85px;    border: 2px solid #ff8b00;    padding: 15px 17px;    font-size: 14px;    line-height: 1.5;    background: #fff;    border-radius: 10px;}.live-chat-tipbox:before {    position: absolute;    content: "";    width: 39px;    height: 26px;    bottom: -24px;    right: 8px;    background: url('../images/homepage/live-chat-angle.png') no-repeat center;}

纯css 制作对话框

.box{    position: relative;    width: 200px;    height: 200px;    border: 2px solid #000;    background-color: #fff;}.box:before{    position: absolute;    content: "";    width: 0;    height: 0;    left: 200px;    top: 20px;    border-left: 10px solid #000;    border-top: 10px solid transparent;    border-bottom: 10px solid transparent;}.box:after{    position: absolute;    content: "";    width: 0;    height: 0;    left: 200px;    top: 23px;    border-left: 7px solid #fff;    border-top: 7px solid transparent;    border-bottom: 7px solid transparent;}

box2的代码：

.box2{    position: relative;    width: 200px;    height: 200px;    border: 2px solid #000;    background-color: #fff;}.box2:before{    position: absolute;    content: "";    width: 0;    height: 0;    left: 200px;    top: 20px;    border-bottom: 20px solid transparent;    border-left: 20px solid #000;}.box2:after{    position: absolute;    content: "";    width: 0;    height: 0;    left: 200px;    top: 22px;    border-bottom: 15px solid transparent;    border-left: 15px solid #fff;}

阅读全文

0 0