css——三角形的实现

不知道实现三角形有多少种方法。以下是我所知道的。新手入门，第一次写博客。

三角形，一个重要的角色扮演是transparent值，它身后撑着的巨大boss是border。

不会怎么解释，直接上代码跟效果图。

		/*等边三角形*/
		.equilateral_triangle{
			width: 0px;
			height: 0px;
			border-left: 50px solid transparent;
			border-right: 50px solid transparent;
			border-bottom: 100px solid black;
		}

再把透明部分去掉（右），上色，对比

嗯，接下来再看看三角形是从怎样根源的根源变化来的

		.square{
			width:0;
			height:0;
			border:50px solid;
			border-color:red green blue yellow;
		}

效果图

由此通过设置transparent就可以演变出各式各样的三角形，举其中两个例子。

 

注意到一点，就是通过设置左右、上下的比例实现不同类型的三角形。

比如，第一个例子，left、right都是bottom的一半，而没设置top值，显示出来的是正三角形，如果top取代bottom，将是倒三角形，其他向左向右一样的道理就不在赘述。

第二个例子，left、right、top、bottom值都一样，每个是正方形的一半，用数学语言描述，底是高的两倍。

在第一个例子上再给它加上一个跟bottom值一样的top，结果如图：

从三角形的实例中加深对border的理解，不，应该说认识。

还是从例子看border四边的分配效果。图是元素加了width跟height。可以看出，border的值是每个梯形的高（YY的描述），底的长度是由相邻元素撑开的。有意思的是相邻元素的分割是对角线的，因此三角形的形成也是利用了border这一特征吧。

不知道怎么理解三角形这种实现方法，只能通过实现的效果去看了。