纯CSS写三角形 自适应不同宽度 – CSS – 前端 div css布局页面经典例子

看图：

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

HTML：

<divclass="triangle"><divclass="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.5vwsolidtransparent;border-right:49.5vwsolidtransparent;border-top:100pxsolid#fff;}

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