用border做三角形

标签：

　　网站上经常会使用一些三角形，除了图片的方式，实际上利用border我们可以做出纯CSS的三角形。我们知道border是个边抖可以单独设置，当四个边相交的时候他们是什么时候改变的？

　　.t0{ margin:30px; height:200px; width:200px; border-top:solid 100px red; border-left:solid 100px green; border-right:solid 100px orange; border-bottom:solid 100px blue; }

　　通过demo可以看到border的相交的地方在45deg平分，当元素的width、和height属性呗设置为0的时候

　　.t1{ margin:30px; height:0px; width:0px; border-top:solid 100px red; border-left:solid 100px green; border-right:solid 100px orange; border-bottom:solid 100px blue; }

　　这样我们就可以看到三角形了，尝试一下去掉两个边框，值保留上边和左边

　　.t2{ margin:30px; height:0px; width:0px; border-top:solid 100px red; border-left:solid 100px green; }

　　这时候做三角形好像简单了，只要我们保留两个相邻边，把另外的一个设置为透明就可以了

　　.t3{ margin:30px; height:0px; width:0px; border-top:solid 100px red; border-right:solid 100px rgba(0,0,0,0); }

　　这样我们就有一个直角三角形了，稍微修改一下

　　.t4{ margin:30px; height:0px; width:0px; border-top:solid 90px red; border-left:solid 200px rgba(0,0,0,0); }

　　这样做等腰直角三角形也简单了，保留相邻的三个边，两个设置为透明就行了

　　.t5{ margin:30px; height:0px; width:0px; border-top:solid 200px red; border-left:solid 200px rgba(0,0,0,0); border-right:solid 200px rgba(0,0,0,0); }

　　再稍微调整一下，还可以做出各种形状

　　.t6{ margin:30px; height:0px; width:0px; border-left:solid 100px green; border-top:solid 100px rgba(0,0,0,0); border-bottom:solid 100px rgba(0,0,0,0); }

　　.t7{ margin:30px; height:0px; width:0px; border-left:solid 200px green; border-top:solid 80px rgba(0,0,0,0); border-bottom:solid 80px rgba(0,0,0,0); }

　　.t8{ margin:30px; height:0px; width:0px; border-left:solid 100px green; border-top:solid 200px rgba(0,0,0,0); border-bottom:solid 100px rgba(0,0,0,0); }

用border做三角形

标签：

原文地址：http://www.cnblogs.com/9192miss/p/4556423.html