首页 > 代码库 > css2----实现三角形和带角框
css2----实现三角形和带角框
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title><style> /*三角形*/ /* div{width:0;height:0;border-top:10px solid transparent;border-bottom:10px solid transparent;border-left:10px solid;} */ /*带角框*/ div{width:100px;height:100px;border:2px solid;} div::before{content:"";display:block;width:0;height:0;border-top:8px solid transparent;border-bottom:8px solid transparent;border-left:8px solid black;position:relative;top:10px;left:100px;} div::after{content:"";display:block;width:0;height:0;border-top:8px solid transparent;border-bottom:8px solid transparent;border-left:8px solid white;position:relative;top:-6px;left:98px;} </style></head><body><div></div></body></html> 实现三角形的原理：1，div的border生成是向外扩的，2,当div有相邻border时，拐角处会以一种各占一半的三角拼合。所以当设这div的宽高为0和0时，如果它有四个border的话，就会组成一个正方形，每边分别为一个等腰三角形，此时若设任意三边对望的两个边为透明色（transparent）时，剩下的一边为一个等腰三角形。
带角框实现原理：利用两个三角形的相对定位使产生视觉上的相减形成不闭合的角号（“>”）。
css2----实现三角形和带角框
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。