CSS-带尖角的对话框

效果图：

 

box1的代码：

.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;
}

伪元素中的top值和border的宽度值需要根据对话框的边框宽度计算得到。