css画不同三角形的不同方法

知识点：border属性

一、第一种方法的实现

① 先来看一下盒子模型加深对本知识点的理解

#div1{
  width: 100px;  /*中间内容部分为100*100px*/
  height: 100px;
  border-width: 50px;  /* border的宽度*/
  border-style: solid;
  border-color: red blue green yellow;
}

② 当把width和height换成0时，其他不变

width: 0；
height: 0;

效果如下图，那么在下图中，我们可以通过给其他三块设置成透明的得到其中一个【上、下、左、右】的三角形

③理解了怎么得到三角形的思想，那么下面来具体实现吧。
其实只需要在原来②的步骤上将border-color属性设置成三个透明，一个加颜色就好了

#div1{
      width: 0;
      height: 0;
      border-width: 100px;
      border-style: solid;
      border-color: red  transparent transparent transparent;
	}

二、第二种方法

其思想和第一种一样，只是代码表达方式不同而已
即：直接写border-left/right/top/bottom不需要的设为透明即可。

注意：当选择显示的是最上面那个三角形时，bottom设为transparent和0是有不同哟

#div2{
    width: 0;
    height: 0;
    border-left: 100px solid green;
    border-right: 100px solid transparent;
    border-top: 100px solid transparent;
    border-bottom:100px solid transparent;
    /* border-bottom: 0;*/
}