纯CSS写三角形,自适应不同宽度

老白 4周前 78浏览 1评论

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

看图:

自适应三角形.jpg 纯CSS写三角形,自适应不同宽度 CSS学习

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


1条评论
展开