今天在寫一個定制模板的時候，遇到一個全屏三角形做的特效，需要用到自適應(yīng)，在不同分辨率下都三角形都能自適應(yīng)居中！
看圖：
因?yàn)檫@個zblog模板需要自定義配色，所以這個三角形必須使用css制作，不能使用背景圖片，當(dāng)瀏覽器縮小的時候，三角形居中不變！
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導(dǎo)致的其它問題。