花开陌上

下面是一些三角形样式，部分我在仿站练习时，用到了的图案，加了点颜色美化，记录一下...

各种三角形的效果图和代码记录

三角形，倒三角形，左三角形，右三角形

上三角

效果图：





代码样式：

#triangle{
    width:0;
    height:0;
    border-left:50px solid transparent;
    border-right:50px solid transparent;
    border-bottom:100px solid #f44336;
}

右三角

效果图：





代码样式：

#triangle{
    width:0;
    height:0;
    border-top:50px solid transparent;
    border-bottom:50px solid transparent;
    border-left:100px solid #2196f3;
}

下三角

效果图：





代码样式：

#triangle{
    width:0;
    height:0;
    border-left:50px solid transparent;
    border-right:50px solid transparent;
    border-top:100px solid #e91e63;
}

左三角

效果图：





代码样式：

#triangle{
    width:0;
    height:0;
    border-top:50px solid transparent;
    border-bottom:50px solid transparent;
    border-right:100px solid #9c27b0;
}

左上直角三角形

效果图：





代码样式：

#triangle{
   width: 0px;  
   height: 0px;  
   margin: 10px 10px;  
   float: left;  
   border-right: 100px solid transparent;
   border-top: 100px solid #ff5722;  
}

右上直角三角形

效果图：





代码样式：

#triangle{
  width: 0px;  
  height: 0px;  
  margin: 10px 10px;  
  float: left;  
  border-left: 100px solid transparent;
  border-top: 100px solid #ffca28;  
}

右下直角三角形

效果图：





代码样式：

#triangle{
  width: 0px;  
  height: 0px;  
  margin: 10px 10px;  
  float: left;  
  border-right: 100px solid transparent; 
  border-bottom: 100px solid #4caf50; 
}

左下直角三角形

效果图：





代码样式：

#triangle{
  width: 0px;  
  height: 0px;  
  margin: 10px 10px;  
  float: left;  
  border-left: 100px solid transparent;  
  border-bottom: 100px solid #009688;  
}