Разместить пять прямоугольников

@Teshuhack · Регистрация: 25.07.2015

Author24 — интернет-сервис помощи студентам

Здравствуйте!

Необходимо разместить на странице 5 прямоугольников, ширина и высота каждого 45% от ширины экрана, 4 из них прижаты к разным углам экрана, 5ый центрирован. Решение должно адаптироваться к изменению ширины-высота экрана.

Пытался нарисовать на canvas, но возникли проблемы с масштабом. Затем пытался с помощью блоков сделать, но при вычислении высоты блока он исчезал со страницы.

Подскажите с помощью чего это можно сделать?
Прикрепил приблизительный вариант того, что, как я думаю, должно получиться.

@Qwerty_Wasd · 27.02.2018, 02:02

Teshuhack, к примеру - песочница

HTML5

<body><div class="left-top"></div>
<div class="left-bottom"></div>
<div class="center"></div>
<div class="right-top"></div>
<div class="right-bottom"></div></body>

CSS

*,*:after,*:before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;padding:0;margin:0;outline:0}
html,body{height:100%;width:100%}
body{position:relative}
div{position:absolute;height:45%;width:45%}
.left-top{top:0;left:0;border:2px solid #8BC34A}
.left-bottom{bottom:0;left:0;border:2px solid #1976D2}
.center{top:50%;left:50%;transform:translate(-50%,-50%);border:2px solid #00BCD4;z-index:1}
.right-top{top:0;right:0;border:2px solid #283593}
.right-bottom{bottom:0;right:0;border:2px solid #FFC107}

@Teshuhack 35 / 35 / 21 Регистрация: 25.07.2015 Сообщений: 164
		1
	Разместить пять прямоугольников 27.02.2018, 01:30. Показов 3585. Ответов 1 Метки нет (Все метки) Здравствуйте! Необходимо разместить на странице 5 прямоугольников, ширина и высота каждого 45% от ширины экрана, 4 из них прижаты к разным углам экрана, 5ый центрирован. Решение должно адаптироваться к изменению ширины-высота экрана. Пытался нарисовать на canvas, но возникли проблемы с масштабом. Затем пытался с помощью блоков сделать, но при вычислении высоты блока он исчезал со страницы. Подскажите с помощью чего это можно сделать? Прикрепил приблизительный вариант того, что, как я думаю, должно получиться. Миниатюры 0

	27.02.2018, 02:02