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的寬度值需要根據對話框的邊框寬度計算得到。