网页——画一个三角形

有参照别人的代码，写一下自己的理解。这是给自己的一个记录~

这个方法主要是对css-border 的理解以及运用。主要利用就是两个内嵌的正方形之间产生的形状

依据图形：

代码：

css：

<style type="text/css">

		.triangle {
			 height:20px; 
			 width:20px; 
			 border-top:50px solid red;
			 border-bottom:50px solid blue;
			 border-right:50px solid green;
			 border-left:50px solid yellow;
			 }
    </style>

html:

<div class="triangle"></div>

代码中的height和width都是对小正方形设值的。大正方形的边长为120px*120px

由上面这个图形可以看到两个正方形和4个等边梯形，要想有一个三角形，可以很自然的想到让小正方形的边长变为0。

得到的图形：

注意写法： height:0px;  width:0px; 或者height:0;  width:0;

如果写成：height:;    width:;或者直接不写这两个，图形会变成下面这样的形状。

我们得到了4个小三角形，但是我们只需1个，所以很容易就想到把其他三个隐形掉。

以得到上面的红色三角形为例：

html的代码不变

改变css代码：

<style type="text/css">
		.triangle {
			 height:0;
			 width:0;
			 border-top:50px solid red;
			 border-bottom:50px solid transparent;
			 border-right:50px solid transparent;
			 border-left:50px solid transparent;
			 }
    </style>

得到：

代码中 border-bottom的语句其实可以直接删去，因为right和left的图形已经可以很好的限制top的图形。

最终css的代码：

利用对border四边的颜色及中间四边形的变形，可以变换出各种梯形以及三角形。

<style type="text/css">
		.triangle {
			 height:0;
			 width:0;
			 border-top:50px solid red;
			 border-right:50px solid transparent;
			 border-left:50px solid transparent;
			 }
    </style>