小知识，大挑战！本文正在参与“程序员必备小知识 ”创作活动
本文已参与「掘力星计划」，赢取创作大礼包，挑战创作激励金。

三角形

1.1 知识补充 - border

属性	属性说明
border	属性设定元素所有边框的宽度、样式、颜色
border-top	属性设定元素上边框的宽度、样式、颜色
border-right	属性设定元素右边框的宽度、样式、颜色
border-bottom	属性设定元素下边框的宽度、样式、颜色
border-left	属性设定元素左边框的宽度、样式、颜色

1.2 案例1：观察border特性并绘制三角形

本案例在线代码入口👉👉(点击传送)

🥇当我们只设置上边框时，我们看到其实边框是一个4边形，而且不会横向长度超过dom的宽度

 border-top:  50px solid green;

🥈那么我们设置上边框和右边框时，我们看到原本横向不会超过dom宽度的边框已经超过了，并且超过的宽度等于右边框的宽度

  border-top:  50px solid green;
  border-right:  50px solid red;

效果如下： 🥉既然如此，我们再看看四条边框的

  border-top:  50px solid green;
  border-right:  50px solid red;
  border-bottom:  50px solid orange;
  border-left:  50px solid blue;

🏅通过上面的的例子可以看到，只要我们把dom的宽高设置为0，再把不需要的三角形设置为透明，我们就能获得一个三角形

.demo3{
  width: 0;
  height: 0; 
  border-top:  50px solid green;
  /*transparent:设置透明颜色*/
  border-right:  50px solid transparent;
  border-bottom:  50px solid transparent;
  border-left:  50px solid transparent;
}

举一反三，每个角度的三角形均在例子里面，在线代码入口👉👉(点击传送)

1.3 案例2：三角形（两条边框绘制）

通过上面的案例我们已经画出了一个简单的三角形，但是有时候我们需要的三角形并不需要4个边框一起处理，2个边框也能构造三角形哦。

在有宽高的情况下，相连边框会进行拼接，其余部分不会超过dom的宽高那么没有宽高的情况下，相连边框依旧会进行拼接，只不过没有的其余部分的边框，只会保留拼接部分，

.demo{
  width: 0;
  height: 0; 
  border-top:  50px solid green;
  border-right:  50px solid orange;
}

那么我们设置相应的透明颜色就能得到一个其他角度的三角形

  border-top:  50px solid green;
  border-right:  50px solid transparent;

举一反三，其余角度的三角形均在例子里面，在线代码入口👉👉(点击传送)

1.4 案例3：三角形（旋转）

我们知道上面那几个角度是完全不够用的，所以这里引入transform属性和rotate()函数

属性	属性说明
`rotate()`	函数定义了一种将元素围绕一个中心点或者通过`transform-origin`设置的原点旋转而不变形的转换

接下来设置不同的角度即可获得各种角度的三角形，在线代码入口👉👉(点击传送)

1.5 案例3：三角形（三角箭头）

这里我写了三个方法，各有利弊。其实实际项目中可能很少遇到这些,但是解决方法有很多，合适项目的才是最好的。

1.5.1 伪元素构建

这也是网上写的最多的，通过::after构建一个伪元素，然后通过绝对定位改变位置进行叠加就能得到箭头，如下图所示：

 .demo2{
   width: 0;
   height: 0;
   border-top:  100px solid red;
   border-right:  100px solid transparent;
   position: relative;
   /*旋转获得不同角度的箭头*/
   transform: rotate(-45deg);
}
  /*伪元素*/
.demo2::after{
  content: '';
  position: absolute;
  right: -110px;
  top: -90px;
  border-top:  100px solid white;
  border-right:  100px solid transparent;
}

在线代码入口👉👉(点击传送)
将伪元素颜色设置成背景色之后，即可获得一个箭头

优缺点	说明
优点	可以自定义不同角度的箭头
缺点	伪元素必须要与背景色相同，否则无法正常显示

1.5.2 box-shadow

box-shadow属性用于在元素的框架上添加阴影效果，

.demo{
  width: 0;
  height: 0; 
  border-top:  100px solid transparent;
  border-right:  100px solid transparent;
  /*参数1：x轴偏移量， 参数2:y轴偏移量， 参数3：颜色*/
  box-shadow: 10px 10px red; 
  /*调整角度*/
  transform: rotate(-45deg); 
}

在线代码入口👉👉(点击传送)

优缺点	说明
优点	可以不用考虑背景颜色问题，代码相对简单
缺点	无法调整角度

1.5.3 border

border通过边框来做箭头一样简单，直接看代码吧，就是两条边框连接在一起再调整角度

.demo{
  width: 100px;
  height: 100px; 
  border-top:  10px solid red;
  border-right:  10px solid red;
  /*调整角度*/
  transform: rotate(45deg); 
}