Когда двигаю блок, то он за собой растягивает и экран

Question

Лучше киньте отдельно в файл и откройте его в браузере.

Дело в том, что если вместо left: 813px; поставить left: 2000px; к примеру, то body будет расширятся из-за того, что двигается блок.

(overflow-x не предлагайте)

.gray {
    position: absolute;
    top: 0;
    left: 813px;

    width: 914px;
    height: 914px;
    background-color: #ccc;
    border-radius: 50px;
    transform: rotate(-47deg);
}

<div class="gray"></div>

Answer 1

Для примера, один из вариантов решения:

* {
  box-sizing: border-box;
}

html,
body {
  padding: 0;
  margin: 0;
}

.project {
  overflow: hidden;
  min-height: 2000px;
  position: relative;
  background: #fff;
}

html {
  font-size: 16px;
}

@media (max-width: 1366px) {
  html {
    font-size: 14px;
  }
}

@media (max-width: 1200px) {
  html {
    font-size: 12px;
  }
}

.tr {
  position: absolute;
  pointer-events: none;
}

.tr-1 {
  top: 0;
  right: 0;
  width: 65.375rem;
  height: 50.6875rem;
  transform-origin: 100% 0%;
  background-image: url("data:image/svg+xml,%3Csvg width='1046' height='811' viewBox='0 0 1046 811' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='-60.1725' y='373.372' width='914' height='914' rx='158' transform='rotate(-57 -60.1725 373.372)' fill='%23F4F5FB'/%3E%3C/svg%3E%0A");
  background-size: 100%;
}

.tr-2 {
  top: 52rem;
  left: 0;
  width: 46.0625rem;
  height: 85.3125rem;
  transform-origin: 0% 0%;
  background-image: url("data:image/svg+xml,%3Csvg width='737' height='1365' viewBox='0 0 737 1365' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M689.337 767.635C752.724 728.576 752.724 636.424 689.337 597.365L-255.04 15.4448C-321.666 -25.6094 -407.5 22.3215 -407.5 100.58V1264.42C-407.5 1342.68 -321.666 1390.61 -255.04 1349.56L689.337 767.635Z' fill='%23F4F5FC'/%3E%3C/svg%3E%0A");
  background-size: 100%;
}

@media (max-width: 1366px) {
  .tr {
    transform: scale(.8);
  }
}

@media (max-width: 1200px) {
  .tr {
    transform: scale(.6);
  }
}

@media (max-width: 992px) {
  .tr {
    transform: scale(.4);
  }
}

<div class="project">
  <div class="tr tr-1"></div>
  <div class="tr tr-2"></div>
</div>

Копируем svg --> кодируем в data:image/ ...
Задаем размеры в процентах или rem чтобы масштабировать + для разрешений еще масштабируем через transform: scale

БЛОГ НА HUSL

Когда двигаю блок, то он за собой растягивает и экран

Ответы (1 шт):