纯css实现三角形--详细原理

利用css可以实现各种样式的三角形

实现效果

代码如下：

1. 实现原理

      width: 0;
      height: 0;
      border-left: 50px solid transparent;
      border-right: 50px solid transparent;
      border-bottom: 100px solid red;
      //div盒子的内容区宽高设置为0。隐藏掉其中三条边的边框
      //剩余一条边框设置宽度以及颜色

2. 隐藏利用transparent属性

      border-right: 50px solid transparent;
      //利用这个属性，可以把必要的边框隐藏掉
      //transparent代表着全透明黑色，类似一个rgba(0,0,0,0)这样的值
      background-color:transparent;
      //这样就代表着背景透明

3. 扩展深入其原理：
   

    #full{
      width:50px;
      height:50px;
      border-width:20px;
      border-style:solid;
      border-color:#e66161 #f3bb5b red #85bfda;
      //上图对应width和height从50px--25px--0px 三个变化过程
      //可见内容区大小变成0后，整个图形由四个border撑起，为四个三角形构成
    }

4. 所以，我们想要任意一个三角形都可以通过设置其他三个边框的颜色transparent和保留其中一个的颜色以及宽度就可以。