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的宽度值需要根据对话框的边框宽度计算得到。