Позиционирование повернутого квадрата - PullRequest
Новая
       26

Позиционирование повернутого квадрата

0 голосов
/ 12 октября 2018

Мне нужно расположить три квадрата Изображение теоремы Пифагора , чтобы создать прямоугольный треугольник посередине, и чтобы они всегда оставались в этом расположении при изменении размера браузера), не перекрываясь и не раздвигаясь.Прямо сейчас я использую 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%;

1 Ответ

0 голосов
/ 12 октября 2018

position:fixed относительно окна браузера.Поэтому, если вы используете процент и изменяете размер окна, вы получите странные результаты.

position: absolute относительно следующего родительского элемента с указанным позиционированием (по умолчанию <body>).

Подумайте о том, чтобы установить для родительского элемента значение position: relative и абсолютно позиционировать свои элементы внутри него, используя либо проценты, либо фиксированные единицы.

Поворот можно выполнить с помощью преобразования CSS, например rotate () функция.

...