css实现圣杯布局、三角形

1.使用flex实现圣杯布局

圣杯布局格式要求：

页面从上到下为头部、中部、脚部；头部、脚部定高，不可伸缩；中部高度自适应。

中部三列式布局：左右两列定宽，不可伸缩；中间内容区自适应。

完整代码及代码分析如下：

	
	
	


	

    

        
  //可保证中间元素最先加载
        

        

    
    

2.css实现三角形

先创建一个有宽高的盒子，同时设置四条边框的大小，假设为50px，结果如下图：

上述代码效果图如下：

 可以发现边框与边框的连接是一条斜线，那么如果不设置宽高的话（width,height均设为0），结果会怎样： 

变成了一个被四种颜色平均分割的正方形了，我们所要的三角形不正是其中的一部分吗，接下来我们只要选择我们所需要的那一部分就好了，所以可以这么做（选择下面那块黄色的），修改CSS代码以后就可以得到三角形。想要哪边就画哪边的border,并且让它相邻两边的border-color:transparent即可：

.triangle{
	width:0px;
	height:0px;
    /*此处将左右的边框设置为透明色*/
	border-left: 50px solid transparent;
	border-right:50px solid transparent;
	border-bottom: 50px solid yellow;
}