用CSS border相关属性画三角形

当前位置 : 首页 > 网页制作 > CSS > 用CSS border相关属性画三角形

用CSS border相关属性画三角形

来源: 作者: 时间:2016-01-23 10: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








:(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

Tag:
网友评论

<