效果圖：

?

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

總結

以上是生活随笔為你收集整理的CSS-带尖角的对话框的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。