您现在的位置：首页 >> 前端 >> 内容

用CSS border相关属性画三角形

时间：2014/8/17 11:32:38 点击：

　　核心提示：效果HTML：vc3Ryb25nPjwvcD4KPHA+PCFkb2N0eXBlIGh0bWw+PGJyPgo8aHRtbCBsYW5nPQ=='en'>CSS Triangle DemoDown T...

效果

用CSS border相关属性画三角形


HTML：<喎?/kf/ware/vc/" target="_blank" class="keylink">vc3Ryb25nPjwvcD4KPHA+PCFkb2N0eXBlIGh0bWw+PGJyPgo8aHRtbCBsYW5nPQ=="en">


<a href="http://www.weiyer.com/Search.asp?KeyWord=/kf/qianduan/css/" target="_blank" class="keylink">CSS</a> Triangle Demo



Down Triangle





Up Triangle





Left Triangle





Right Triangle








CSS：（triangle.css）

.down-triangle {
width: 0;
height: 0;
border-width: 10px 10px 0 10px;
border-style: solid;
border-color: #dc291e transparent;
}

.up-triangle {
width: 0;
height: 0;
border-width: 0px 10px 10px 10px;
border-style: solid;
border-color: #dc291e transparent;
}

.left-triangle {
width: 0;
height: 0;
border-width: 10px 10px 10px 0px;
border-style: solid;
border-color: transparent #dc291e;
}

.right-triangle {
width: 0;
height: 0;
border-width: 10px 0px 10px 10px;
border-style: solid;
border-color: transparent #dc291e;
}


github链接：https://github.com/kiwiwin/css-demo中triangle-demo

Tags:用C CS SS SB 
作者：网络　来源：kiwi_coder
  • 上一篇：CSS（三）解析盒子模型的浮动
  • 下一篇：CSS 有趣的边框

    • 您可能感兴趣的文章

    相关评论

    发表我的评论

    • 大名：
    • 内容：
    • 易笔记(art.yibiji.com) © 2025 版权所有 All Rights Reserved.
    • 本站部分内容收集于互联网若有侵权请联系站长删除 鄂ICP备18030946号-1