CSS-带尖角的对话框

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

效果图：

box1的代码：

.box{
position: relative;
width: 200px;
height: 200px;
border: 2px solid #000;
background-color: #fff;
}
.box:before{
position: absolute;
content: "";
width:;
height:;
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:;
height:;
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:;
height:;
left: 200px;
top: 20px;
border-bottom: 20px solid transparent;
border-left: 20px solid #000;
}
.box2:after{
position: absolute;
content: "";
width:;
height:;
left: 200px;
top: 22px;
border-bottom: 15px solid transparent;
border-left: 15px solid #fff;
}