kpengfang / 微信小程序 / css带边框的小气泡

分享

   

css带边框的小气泡

2018-03-20  kpengfang
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.tag{
width:300px;
height:100px;
border:5px solid #09F;
position:relative;
background-color:#FFF;
}
.tag:before,.tag:after{
content:"";display:block;
border-width:20px;
position:absolute; bottom:-40px;
left:100px;
border-style:solid dashed dashed;
border-color:#09F transparent transparent;
font-size:0;
line-height:0;
}
.tag:after{
bottom:-33px;
border-color:#FFF transparent transparent;
}
</style>
</head>
<body>
<div class="tag">
css3气泡框
</div>
</body>
</html>
如图所示:
稍微修改修改,就可以得到自己想要的小气泡弹框呦!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.tag{
width: 280px;
height: 80px;
border: 1px solid #50e3c2;
position: relative;
background-color: #69748b;
border-radius: 5px;
color: #fff;
text-align: center;
padding: 20px 10px;
}
.tag:before,.tag:after{
content:"";display:block;
border-width:15px;
position:absolute; bottom:-31px;
left:100px;
border-style:solid dashed dashed;
border-color:#50e3c2 transparent transparent;
font-size:0;
line-height:0;
}
.tag:after{
bottom:-30px;
border-color:#69748b transparent transparent;
}
</style>
</head>
<body>
<div class="tag">
css3气泡框
</div>
</body>
</html>
如图所示:
 

    本站是提供个人知识管理的网络存储空间,所有内容均由用户发布,不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息,谨防诈骗。如发现有害或侵权内容,请点击一键举报。

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多
    喜欢该文的人也喜欢 更多

    ×
    ×

    ¥.00

    微信或支付宝扫码支付:

    开通即同意《个图VIP服务协议》

    全部>>