对话框样式

一、一般对话框样式

外层：
position:fixed;
top:0;
left:0;
bottom:0;
right:0;
background:rgba(0,0,0,.4)

内层：
position: absolute;
top: 50%;
left: 50%;
transform:translate(-50%,-50%);
background-color: #fff;

二、css模拟带三角的对话框样式

模拟总结：
1、两个div边框颜色一样、背景颜色一样
2、三角div只给两个border+旋转+定位

.box{
    position:relative;
    width:100px;
    height:100px;
    border: 1px solid #d1f;
    background: #ccc;
}
.triang{
    position:absolute;
    top:-4px;
    left: 8px;
    width: 8px;
    height: 8px;
    border-top: 1px solid #d1f;
    border-left: 1px solid #d1f;
    background: #ccc;
    transform: rotate(45deg);
}