css 画三角形

border-width:上厚度 右边厚度 下厚度 左边厚度 设置的厚度取交集 border-color:上颜色 右边颜色 下颜色 左边颜色; （transparent gold）不显示的模块设置为transparent透明色；

设置宽度的规则为找重叠部分 比如下边的三角形： 则需要设置下边的宽度，左边和右边的宽度，但上边的宽度就要为0； 颜色设置下边为有颜色，其他三个为透明色； 其他的同理

例如

设置下边的三角形 
border-width:0px 240px 240px;
border-style:solid;
border-color:transparent transparent gold; 

设置上边的三角形
border-width:240px 240px 0px;
border-style:solid;
border-color:gold transparent transparent ; 

设置左边的三角形
border-width:240px 0px 240px 240px;
border-style:solid;
border-color: transparent transparent transparent gold; 

设置右边的三角形
border-width:240px 240px 240px 0px;
border-style:solid;
border-color:transparent gold transparent transparent ; 




/* 三条边的宽度定义 底边方向有颜色 */
.up{
  width: 0;
  height: 0;
  border-style: dashed;
  border-width: 28px 28px 0px;
  border-color:  aqua transparent;
}
.down{
  width: 0;
  height: 0;
  border-style: dashed;
  border-width: 0px 28px 28px;
  border-color: aqua  transparent;
}
.left{
  width: 0;
  height: 0;
  border-style: dashed;
  border-width: 28px 0px 28px 28px;
  border-color: transparent  aqua transparent;
}
.right{
  width: 0;
  height: 0;
  border-style: dashed;
  border-width: 28px 28px 28px 0px;
  border-color: transparent aqua transparent ;
}