用CSS如何画等腰三角形和直角三角形

精髓：理解，并自己变化

原理：利用div四条边的边框线，通过设置边框线宽度，并调整div的内  容高度去实现

步骤如下：

第一步：

给一个div设置同样的宽、高100px，再把它四边边框线的宽度设置100px，并用过顺时针的方向设置四边边框线的颜色。

（得到效果图如下，有点接近于三角形了）

第二步：

通过思考，当div里面内容块（白色部分）宽、高都为0时，四边的梯形就可以变为三角形了。

 （得到效果图如下，是三角形了）

第三步：

现在把你想保留的三角形保留，不想要的三角形就用transparent把它的颜色设置为透明。

现在我想要保留粉色三角形。

 （得到效果图如下，但审查元素会发现，其他三边透明的三角形仍然会占据位置，那如何去掉这些位置呢？）

  

 

最后一步：

把上边的边框线宽度设置0，就能去掉上面原来紫色三角形所占据的位置。

（得到效果图如下，一个等腰三角形就完成了）

 

 

 

二、在上面的基础上如何画直角三角形？

 

理解： 如图，粉色小三角形通过一条高，把它分成左、右两个小直角三角形。

（1）如何去掉左边粉色小三角形？

方法：左边直角三角形的直角边长度，是原来黄色left边框线的宽度，所以，将黄色边框线宽度设置为0即可。

（效果图如下） 

 

（2）如何去掉右边粉色小三角形？

方法：右边直角三角形的直角边长度，是原来绿色right边框线的宽度，将lvs色边框线宽度设置为0即可。

（效果图如下）