Javascript 开发必备：CSS 实现自适应正方形与等宽高比矩形全解析

在CSS中，我们可以使用flexbox布局来实现自适应正方形和等宽高比矩形。 1. 自适应正方形： ```css .container { display: flex; justify-content: center; align-items: center; } .square { width: 0; height: 0; border-top: 50px solid transparent; border-bottom: 50px solid transparent; border-left: 100px solid red; } ``` 在这个例子中，我们创建了一个容器和一个正方形。容器使用flexbox布局，使元素在水平和垂直方向上居中。正方形的宽度和高度都设置为0，然后使用border属性来创建一个边框。通过设置border-top、border-bottom和border-left的宽度，我们可以创建一个等边的正方形。 2. 等宽高比矩形： ```css .container { display: flex; justify-content: center; align-items: center; } .rectangle { width: 0; height: 0; border-top: 50px solid transparent; border-bottom: 100px solid transparent; border-left: 100px solid red; } ``` 在这个例子中，我们创建了一个容器和一个矩形。容器使用flexbox布局，使元素在水平和垂直方向上居中。矩形的宽度和高度都设置为0，然后使用border属性来创建一个边框。通过设置border-top、border-bottom和border-left的宽度，我们可以创建一个等宽高比的矩形。在这个例子中，矩形的宽度和高度的比例是1:2。 ######[AI写代码神器 | 354点数解答 | 2023-11-09 01:47:01]