CSS中使用border来创建三角形的基本方法讲解

比较简单实用的还是使用border来创建三角形，今天主要研究这个的实现
将边框分别设置为红/黄/蓝/绿

CSS Code复制内容到剪贴板

.triangle {   

    height: 0;   

    width: 0;   

    overflow: hidden;   

    font-size: 0;   

    line-height: 0;   

    border-color: #ff0000 #ffff00 #0000ff #008000;   

    border-style: solid;   

    border-width: 40px 40px 40px 40px;   

}  

效果如下：

四个三角形合成一个正方形，大小为80x80，如果我们只想保留其中某个三角形的话，将其它的设置为透明即可，比如(以下css未改变部分与上面相同)

CSS Code复制内容到剪贴板

.triangle {   

    border-color: #ff0000 transparent transparent transparent;   

    border-width: 40px 40px 40px 40px;   

}  

效果：

IE6不支持transparent，所以不会透明而会显示难看的黑色，不过也有解决方法：将透明的部分对应的border-style设为dashed即可

CSS Code复制内容到剪贴板

.triangle {   

    border-color: #ff0000 transparent transparent transparent;   

    border-style: solid dashed dashed dashed;   

    border-width: 40px 40px 40px 40px;   

}  

正方形按对角线平分为两个三角形的情况

CSS Code复制内容到剪贴板

.triangle {   

    border-color: #ff0000 #ffff00 #0000ff #008000;   

    border-style: solid;   

    border-width: 0 0 40px 40px;   

}  

CSS Code复制内容到剪贴板

.triangle {   

    border-color: #ff0000 #ffff00 #0000ff #008000;   

    border-style: solid;   

    border-width: 0 40px 40px 0;   

}  

需要指出的是，此时正方形的大小为40x40

如果将border-width的某一边设为0又会怎么样呢？也算是两种情况

CSS Code复制内容到剪贴板

.triangle {   

（编辑：厦门网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!