不知道实现三角形有多少种方法。以下是我所知道的。新手入门,第一次写博客。
三角形,一个重要的角色扮演是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这一特征吧。
不知道怎么理解三角形这种实现方法,只能通过实现的效果去看了。