• 网站首页
• 网站建设
• 短视频
• 网站推广
• 网站模板
• 客户案例
• 资讯动态
• 关于我们

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

版权说明：
本网站凡注明“广州京杭 原创”的皆为本站原创文章，如需转载请注明出处！
本网转载皆注明出处，遵循行业规范，如发现作品内容版权或其它问题的，请与我们联系处理！
欢迎扫描右侧微信二维码与我们联系。