前端面试题总结整理，css第五篇（怎样纯CSS画三角形）

1. 如何以最简单的方式理解用CSS画三角形原理？（自己实验得出的心得结论）

• 首先要知道一个盒子无宽高，有border时浏览器的显示模式，如下：

代码（border宽度相等的情况下）

div{
         width: 0;
         height: 0;
         border-left:50px solid red;  
         border-top:50px solid blue;  
         border-right:50px solid green;  
         border-bottom:50px solid yellow;  
      }

效果图： image.png

这个我们也不需要知道原理，因为浏览器是这样渲染出来的！

• 然后我们在看下border不等的情况下的模式，代码就不发了，改下各个border-width宽度就行了：

效果图： image.png

由此我们可以看出图中每个三角形的高是等于border-width值的

• 说了这么多，那怎么得出个单独的三角形呢？想一下，把其他另外三个三角形隐身不就可以了嘛，相对的就是把border-color设置为transparent来实现。

代码：

div{
          width: 0;
          height: 0;
          border-left:100px solid transparent;  
          border-top:80px solid transparent;  
          border-right:40px solid transparent;  
          border-bottom:70px solid yellow;  
      }

效果图： image.png

可以看出其他几个三角隐身了。

• 那怎么得出我们想要的三角形呢，比如直角，或者是底边和高需要确定的角，因为底边=相邻两个border的宽度，高=自身border的宽度。那直角呢，开始我看资料也看不懂，然后自己得出个小技巧！

• 上面的代码4个边的border都设置了，如果哪个边不设置会是怎样的效果呢，看图（下面那个四变形是4个边都设置了border情况下，这样是为了给上面没设置border-right情况下做一个参照，对三角形宽高有个数据上的认识）
  

  当border-right不设置时： QQ截图20170912170806.jpg
  从图中可以看出，border-right不设置时，就好像被直接削掉了右边，如黑线所示。

---

• 当我们两条边都不设置border时，border-right，border-bottom都不设置。当如下图： image.png
  是不是有点看不明白，你这样来看，如下图： QQ截图20170912170806.jpg
  这样是不是看的比较明白点，这样border-right，border-bottom都不设置就好像把下面和右边都削掉了一样，最后只留下左上角，即下图：
  image.png
  

  最后怎么得出这个直角三角形，想必你也知道了，设置border-left或者border-top的color为transparent,就得到直角三角形了！

---

补充，如何制作这种效果？

image.png

只需要两个白黑三角形相叠加，黑色在下，白色在上，但是包裹元素的背景色也要是白色！！！