首页 > 代码库 > 如何使用CSS绘制一个响应式的矩形
如何使用CSS绘制一个响应式的矩形
背景：
最近因为需要用到绘制类似九宫格的需求，所以研究了一下响应式矩形的实现方案。
有如下几种方案：
- 使用js来设置元素的高度
- 使用vw单位 div {width: 50vw; height: 50vw;}
- 使用伪元素设置padding的方式来实现正方形（也就是本次使用的方式）
实现一个正方形
1 .square2 position: relative3 width: 100%4 5 &::before6 content: ‘‘7 display: block8 padding-top: 100%
1 <div class="square"></div>
我们的做法就是使用伪元素的 padding-top: 100% 来撑开元素本身。
因为 pading-top 与 padding-bottom 的百分比取值来自于元素的宽度，所以，设置值为100%就实现了我们想要的功能。
实现更多的功能
想要实现更多比例的形状，其实就是修改 ::before 中的 pading-top 或者 padding-bottom 的值即可。
1 // 16: 9 2 .square::before 3 padding-top: (9 / 16 * 100%) 4 5 // 4: 3 6 .square::before 7 padding-top: (3 / 4 * 100%) 8 9 // 1: 210 .square::before11 padding-top: 200%
当然，上边的实现都只是一个简单的矩形，如果你的矩形里边还要有一些内容的话，需要给元素添加以下几个属性：
1 .content2 position: absolute3 top: 04 right: 05 bottom: 06 left: 0
1 <div class="square">2 <div class="content">3 Awesome4 </div>5 </div>
要注意的有以下几点：
- IE7-不支持
- 元素不要设置 height 以及 overflow: hidden
参考资料
w3-padding
如何使用CSS绘制一个响应式的矩形
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。