对话框css3实现方式 原
<style type="text/css">
#box {
margin-left:80px;
margin-top:20px;
padding-left:20px;
height: 60px;
background: #2aa1c8;
position: relative;
border-radius:10px;
border:1px solid #1c82a3;
}
#box:before{
content:"";
position: absolute;
right: 100%;
top: 16px;
width: 0;
height: 0;
border-top: 12px solid transparent;
border-right: 12px solid #1c82a3;
border-bottom: 12px solid transparent;
}
#box:after {
content:"";
position: absolute;
right: 100%;
top: 18px;
width: 0;
height: 0;
border-top: 10px solid transparent;
border-right: 10px solid #2aa1c8;
border-bottom: 10px solid transparent;
}
</style>
<body class="">
<div style="width:60px;height:60px;background:#ccc;float:left;"></div>
<div id="box">对话框</div>
</body>
//before伪类作为三角的边框
//此对话框是自适应屏幕大小的(adsbygoogle = window.adsbygoogle || []).push({});
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2016/05/09 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读