首页 > 代码库 > CSS实现DIV三角形
CSS实现DIV三角形
本文内容收集来自网络
#triangle-up { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid red;}
#triangle-down { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-top: 100px solid red;}
#triangle-left { width: 0; height: 0; border-top: 50px solid transparent; border-right: 100px solid red; border-bottom: 50px solid transparent;}
#triangle-right { width: 0; height: 0; border-top: 50px solid transparent; border-left: 100px solid red; border-bottom: 50px solid transparent;}
#triangle-topleft { width: 0; height: 0; border-top: 100px solid red; border-right: 100px solid transparent;}
#triangle-topright { width: 0; height: 0; border-top: 100px solid red; border-left: 100px solid transparent; }
#triangle-bottomleft { width: 0; height: 0; border-bottom: 100px solid red; border-right: 100px solid transparent;}
#triangle-bottomright { width: 0; height: 0; border-bottom: 100px solid red; border-left: 100px solid transparent;}
<!-- 外框 --><div class="mod-container"> <!-- 小三角部分 --> <div class="mod-triangle"> <div class="t-border"></div> <div class="t-inset"></div> </div></div>
/*外框容器*/.mod-container { width:100px; height:60px; border:1px solid #000; margin:20px; background:#fff;}/*小三角部分*/.mod-triangle { display:block; position:relative; left:-23px; top:18px; z-index:20;}.mod-triangle .t-border,.mod-triangle .t-inset{ left:0px; top:0px; width:0; height:0; font-size:0; overflow:hidden; position:absolute; border-width:12px; /*可在此处更改小三角方向:上-右-下-左(solid的位置)*/ border-style:dashed solid dashed dashed;}/*小三角的边框,如果不需要,可将颜色值改变*/.mod-triangle .t-border{ border-color:transparent #000 transparent transparent; left:-1px;}.mod-triangle .t-inset{ border-color: transparent #fff transparent transparent;}
CSS实现DIV三角形
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。