HTML+CSS实例：通过CSS绘制三角形

题目

让你绘制一个如图所示的三角形&＃xff1a;

解决

主要知识点

&＃xff08;1&＃xff09;通过设置标签中的width和height为0来形成三角形
&＃xff08;2&＃xff09;利用border属性中的transparent值&＃xff0c;让边框变透明&＃xff08;至于为什么是边框变透明请往后看&＃xff09;

代码实现

<div class&＃61;"triangle">div>


.triangle{width: 0px;height: 0px;border-top: 50px solid red; border-left: 50px solid transparent;border-right: 50px solid transparent;border-bottom: 50px solid transparent;
}


分析&＃xff1a;

标签的左右下部分都让其透明了&＃xff0c;而只让标签的上半部分也就是border-top显示了红色&＃xff0c;所以三角形整体的颜色是红色&＃xff0c;div边框的宽度就是三角形的大小。

扩展

&＃xff08;1&＃xff09;如果要绘制这样一个三角形呢&＃xff1f;

很简单&＃xff0c;只要将border-left设置为blue&＃xff0c;其余三条边框设置为transparent就行&＃xff0c;如下&＃xff1a;

.triangle{width: 0px;height: 0px;border-left: 50px solid blue;border-top: 50px solid transparent;border-right: 50px solid transparent;border-bottom: 50px solid transparent;
}


&＃xff08;2&＃xff09;如果要绘制这样的三角形呢&＃xff1f;

只要将下边框改为绿色就行&＃xff0c;如下&＃xff1a;

.triangle{width: 0px;height: 0px;border-left: 50px solid blue;border-top: 50px solid transparent;border-right: 50px solid transparent;border-bottom: 50px solid green;
}


&＃xff08;3&＃xff09;如果我们要绘制这样一个三角形呢&＃xff1f;

其实就只要让这样的一个三角形的底部边框宽度变为0px即可&＃xff0c;如图&＃xff1a;

代码如下

.triangle{width: 0px;height: 0px;border-left: 50px solid red;border-top: 50px solid transparent;border-right: 50px solid transparent;border-bottom: 0px solid transparent;
}


详细讲解

为什么让边框变透明就可以绘制出三角形了&＃xff0c;想了许久&＃xff0c;在不断的测试之下&＃xff0c;发现了这样一种规律
&＃xff08;1&＃xff09;当把标签div的宽和高都设置为100px&＃xff0c;边框的高度设置为50px并且边框颜色各异的时候&＃xff0c;形成的图如下

.triangle{width: 100px;height: 100px;border-left: 50px solid red;border-top: 50px solid green;border-right: 50px solid blue;border-bottom: 50px solid yellow;
}


&＃xff08;2&＃xff09;如果此时我们将标签的宽设置为0px&＃xff0c;则出现如下的图示

&＃xff08;3&＃xff09;接下来&＃xff0c;如果我们把标签的高也设置成0px&＃xff0c;如下图&＃xff1a;

其实就是四根带颜色的比较宽的边框叠加起来&＃xff0c;然后形成了三角形的样子。如果我们让黄色的边框隐形或者或说是变透明&＃xff0c;那么&＃xff0c;就会如下所示

.triangle{width: 0px;height: 0px;border-left: 50px solid red;border-top: 50px solid green;border-right: 50px solid blue;border-bottom: 50px solid transparent;
}


可以通过改变边框的高度来改变三角形的形状&＃xff0c;如下&＃xff1a;

.triangle{width: 0px;height: 0px;border-left: 50px solid red;border-top: 100px solid transparent;border-right: 80px solid transparent;border-bottom: 20px solid transparent;
}