如何用 CSS 画一个边长可变的正方形？

程序员Levix
805 阅读2分钟

「这是我参与11月更文挑战的第14天，活动详情查看：2021最后一次更文挑战」

如何用 CSS 画一个边长可变的正方形？

1 场景描述

某个界面窗口中有一个圆形，不同用户电脑的分辨率不同，导致随着窗口宽度的变化（高度未变），圆形发生了变形

1.png

这是因为圆的CSS是这么写的：

.circle {
  width: 40%;
  height: 40%;
  border-radius: 50%;
}

现在希望随着窗口宽度的变化，圆形半径变化，但是不发生形变

2 原因

之所以会出现圆形变形现象，是因为width和height使用百分数形式时的基准不同

width以父元素宽度为准，height以父元素高度为准，父元素宽度变化、高度不变时，子元素宽度发生变化而高度不变，因此发生形变

3 解决方法

3.1 利用padding百分比以父元素宽度为准

和height不同的是，padding包括padding-top、padding-bottom、padding-left、padding-right等使用百分比时是以父元素宽度为准的

利用这点，可以画出一个边长随着父元素宽度变化而变化的正方形

.box {
  width: 40%;
  padding-top:40%;
}

3.2 使用 vw 统一基准

vw是视口（viewport units）单位，1vw = 可视窗口的宽度的百分之一

.box {
  width: 10vw;
  padding-top:10vw;
}

4 场景抽象

事实上这个问题的本质是画一个正方形，这个正方形的边长会随着父元素宽度的变化而变化

这个正方形只要加上border-radius: 50%就成了半径可变的圆

更为一般的，一个长方形长宽比例不变，大小随着父元素宽度变化而变化，也是同样的解决思路

📎 附：模拟业务场景的代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .container {
        display: flex;
        width: 100%;
        height: 500px;
      }
      .left {
        width: 50%;
        height: 100%;
        background: pink;
      }
      .right {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 50%;
        height: 100%;
        background: grey;
      }
      .circle {
        width: 40%;
        height: 40%;
        background: #fff;
        border-radius: 50%;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="left"></div>
      <div class="right">
        <div class="circle"></div>
      </div>
    </div>
  </body>
</html>
avatar
文章
阅读
粉丝