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

看图：

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

HTML：

<div class="triangle"><div class="box"></div></div>

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导致的其它问题。