html5不同底色的等腰三角形三角板,纯CSS写三角形，自适应不同宽度

今天在写一个定制模板的时候，遇到一个全屏三角形做的特效，需要用到自适应，在不同分辨率下都三角形都能自适应居中！

看图：

因为这个zblog模板需要自定义配色，所以这个三角形必须使用css制作，不能使用背景图片，当浏览器缩小的时候，三角形居中不变！

HTML：

CSS：body{position: relative;}

.triangle{clear: both;overflow: hidden;width: 100%;height: 100px; background-color: #3655af;}

.triangle .box{

position: absolute;left: 50%;

margin-left: -49.5vw;

width: 0;

height: 0;

border-left: 49.5vw solid transparent;

border-right: 49.5vw solid transparent;

border-top: 100px solid #fff;

}

注意：其中的49.5vw的意思是：浏览器宽度的49.5%，避免直接使用px导致的其它问题。