用CSS border相关属性画三角形 - html/css语言栏目：-自学php网

用CSS border相关属性画三角形 - html/css语言栏目：

来源：自学PHP网时间：2015-04-14 14:51 作者：阅读:次

[导读] 效果HTML： CSS Triangle Demo Down Triangle Up Triangle Left Triangle...

效果

HTML：<喎"http://www.2cto.com/kf/ware/vc/" target="_blank" class="keylink">vc3Ryb25nPjwvcD4KPHA+PCFkb2N0eXBlIGh0bWw+PGJyPgo8aHRtbCBsYW5nPQ=="en">

CSS Triangle Demo

Down Triangle

Up Triangle

Left Triangle

Right Triangle

html>

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

CSS 有趣的边框 - html/css语言栏目：html.css - 自学

CSS（三）解析盒子模型的浮动 - html/css语言栏目：

子栏目

用CSS border相关属性画三角形 - html/css语言栏目：

Down Triangle

Up Triangle

Left Triangle

Right Triangle

最新评论

添加评论

更多文章推荐

添加评论