用CSS3绘制三角形的简便方法
CSS边框的使用及其透明属性值实现三角形,其中最重要的是了解DIV的高度和宽度为0,边缘,填充0,所以这个箱子的大小是他的边界元由于相邻边界重叠的叠加,因此内容实际上是宽的两边边界的存在是梯形,宽度和高度为0时,div的内容,在三角形的性能边界,四边框颜色透明边框和透明,并有权设置边框的颜色为红色三角形出现,事实上这是三角形的右边界。
CSS代码将内容复制到剪贴板。
{ #三角形上
宽度:0px;
身高:0px;
边境:100px固体透明;
右:红色100px固体边界;
}
图解的
正常的框架模型,对50px div的宽度和面积的内容。黑线是高度,是它的右边框,它是梯形的。
CSS代码将内容复制到剪贴板。
{ #三角形上
宽度:50px;
身高:50px;
边境:100px固体红;
底部边框:100px固体红;
}
当div的内容宽度和高度都是0的时候。该区域的黑线是它的右边框,呈三角形。
CSS代码将内容复制到剪贴板。
{ #三角形上
宽度:0px;
身高:0px;
边境:100px固体红;
}
当div的内容宽度和高度在0上都是透明的时。左上边框,右边框为红色,三角形显示。
CSS代码将内容复制到剪贴板。
{ #三角形上
宽度:0px;
身高:0px;
边境:100px固体透明;
右:红色100px固体边界;
}
结合CSS的其他特性,以产生更有趣的结果!