Создание идеальных адаптивных фигур с помощью единицы измерения CSS vw

Демонстрация создания адаптивных фигур с помощью единицы измерения vw, адаптация примера из урока Dudley Storey, специально для сайта dejurka.ru

HTML

<div class="twentysquare">
</div>
<div class="onetworect">
</div>
<div class="goldenrect">
</div>

CSS

div.twentysquare {
	background: #999;
	width: 20vw;
	height: 20vw;
}
div.onetworect {
	width: 20vw; 
  height: 40vw; 
  background: #fff;
}
div.goldenrect {
	width: 100vw;
	height: 61.8vw;
	background: red;
}