Как сверстать панель такой формы?

Question

[PK_D]

Всем привет!

Подскажите, пожалуйста, как сверстать боковые панели этой страницы?


Высота страницы может меняться. Мне хочется, чтобы фигуры пропорционально уменьшались и увеличивались.
А если же высота страницы будет меньше какого-то значения - фигура, которая не поместилась, просто скрывалась.

Мой текущий вариант: https://jsfiddle.net/anhz5gs7/

Спасибо.

Answer 1

[Ингвар Фон Бьёрк]

Для фигур можно задать значения ширины в vw:
width: 10vw; //10% от видимо ширины
И аналогично расположить их:

top: 10vh; 10% от видимой высоты
left: 10vw; 10% от видимо ширины

И добавить медиа-запросы, чтобы при определённом размере экрана они скрывались:

@media screen and (max-width: 960px) {
display: none; //при максимальной ширине 960px элемент скроется
}

Comments

[Ankhena]

//10% от видимо ширины

10% от ширины окна браузера включая полосу прокрутки