利用border来制作三角形及其他图形

     

（1）等腰三角形制作

代码如下：   

div{

            width:0;

            height:0;

            border-width:0 150px 100px 150px;

            border-style:none solid  solid;

            border-color:transparent transparent red;

        }

 

显示效果如下：

下图是两边为150px的等腰三角形 当高和宽为零时，可以用下图三角形

由于没有宽和高，可以以一个点为参考点，定为A点，那么AB之间的水平距离就是border-left ,为150px,  AC之间的水平距离就是border-right,为150px;A与底端的垂直距离为border-bottom,为100px, transparent的意思是透明。Border-left border-right 两边透明了，综合效果如图所示。制作等腰三角形方法不唯一，这只是其中一种。

 

 

 

（2）等腰直角三角形制作

代码如下：div{

 

            height: 0px;

            width: 0px;

            border-width: 200px 0px 0px 200px;

            border-style: solid solid;

            border-color:green;

            border-top-color: transparent;

     

           } 

效果如下:

Border-top与border-left大小相同，其他两项为零即可。

(3)等边三角形制作

代码如下：

div{

        width: 0;

                  height:0;

                  border-left:100px solid transparent;

                  border-right:100px solid transparent;

                  border-bottom:200px solid orange;       

    }

 

效果如下：

边长为200px的等边三角形

Border-left, border-right, border-bottom比例为1:1:2 即可

（4）由border制作的其它效果

代码如下：

div{

            width:200px;

            height:200px;

            border-width:50px 50px 50px 50px;

            border-style:solid solid;

            border-color:red;

            margin-left: 100px;

            margin-top: 100px;

            border-top-color: transparent;

        }

效果如下：

（5）其它效果

代码如下：

div{

            width:0;

            height:0px;

            border-width:150px 150px 150px150px;

            border-style:solid solid;

            border-left-color:green ;

            border-right-color:blue;

            border-top-color:pink;

            border-bottom-color:red;    

        }

 

显示如下：

 

对比代码：div{

            width:0;

            height:0px;

            border-width:150px 150px 150px150px;

            border-style:solid solid;

            border-left-color:green ;

            border-right-color:blue;

            border-top-color:pink;

            border-bottom-color:red;

            border-left-color: transparent;      

            border-right-color: transparent;

 

        }

          效果如下：

 

通过调整border的属性值，可以制作出各种各样的图形，而且方法都不是唯一的，难易程度也不同。