<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伪类作为三角的边框
//此对话框是自适应屏幕大小的
919
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
