纯CSS写三角形，自适应不同宽度_CSS学习

来源：网络整理时间：2023/3/4 1:05:16 共 3622 浏览

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

看图：

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

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

·上一条：jQuery插件 - 滚动条样式-jQuery custom content scroller，兼容所有浏览器_js/jQuery | ·下一条：display: table-cell 无法使用 margin/ padding 的解法_CSS学习