定位旋转正方形答案

【问题标题】：Positioning rotated square定位旋转正方形
【发布时间】：2018-10-13 13:10:25
【问题描述】：

我需要定位三个正方形Pythagoras' Theorem picture 以在中间创建一个直角三角形，并且需要它们始终保持这种排列方式（调整浏览器大小）而不会重叠或分开。现在我使用 position:fixed 每个正方形并使用百分比放置它们。

有没有更好的方法来做到这一点？谢谢

对于我使用的 5x5 正方形

#five div {
position:relative;
height: 54px;
width: 54px;
border: 1px dashed gray;
display: inline-block;
margin: 0;
}

#five {
width:300px;
height:300px;
background:yellow;
border:5px solid yellow;
margin:auto;
transform: rotate(30deg);
padding: 5px;
position: fixed;
top:20%;
left: 50%;
}

3x3 深蓝色方块

#three {
width: 150px;
height: 150px;
border: 5px solid blue;
padding: 5px;
position: fixed;
top:48%;
left: 33%;
}

4x4 浅蓝色方块

#four {
width: 260px;
height: 260px;
border: 5px solid lightblue;
margin-top: 5px;
padding: 5px;
position: fixed;
top:69%;
left: 45%;

【问题讨论】：

分享你的代码
欢迎来到 Stack Overflow。请注意，这不是一个家庭作业制作网站。它应该告诉你已经尝试过什么，以及它在多大程度上没有工作，然后问一个详细的问题。只是把你的调查问卷扔掉，让别人替你填写，被认为是不礼貌的。
很抱歉，我发帖时消息的格式搞砸了，并不是说我的粗鲁。

标签： javascript css responsive positioning

【解决方案1】：

position:fixed 是相对于浏览器窗口的。因此，如果您使用百分比并修改窗口大小，您会得到奇怪的结果。

position: absolute 相对于具有指定定位的下一个父元素（默认为<body>）。

考虑将父元素设置为position: relative，并使用百分比或固定单位将您的项目绝对定位在其中。

可以使用rotate() 函数之类的 CSS 变换来完成旋转。

【讨论】：