CSS-带尖角的对话框

最新推荐文章于 2024-09-09 23:15:35 发布

晚风资源组

最新推荐文章于 2024-09-09 23:15:35 发布

阅读量2k

点赞数 1

文章标签： 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;
}