首页 > 代码库 > CSS-带尖角的对话框
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的宽度值需要根据对话框的边框宽度计算得到。
CSS-带尖角的对话框
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。