Как задвинуть элемент за поля документа?

Question

Речь идет о красном кружке справа, на первый взгляд кажется что проблемы нет, но если выбрать мобильное устройство в DevTools, то кружок отказывается заезжать за границы, пробовал менять единицы измерения сдвига, результат не меняется

* {
    margin: 0;
    padding: 0;
    font-family: 'Quicksand', sans-serif;
    font-style: normal;
    color: #1D1D1D;
}

body {
    overflow-x: hidden;
}

.elipse-1 {
    width: 32px;
    height: 32px;
    position: absolute;
    box-shadow: 0px 3px 20px rgba(0, 0, 0, 0.05);
    background: linear-gradient(180deg, #FF8E8E 0%, #F62424 100%);
    top: 287px;
    left: 99.25%;
    border-radius: 50%;
}

<html>
  <body>
    <div class="elipse-1"></div>
  </body>
</html>

Answer 1

Пожалуйста!

body {
    height: 3000px
}

.elipse-1 {
    position: absolute;
    overflow-x: hidden;
    top: 287px;
    right: 0;
    width: 32px;
    height: 32px
}

.elipse-1::after {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    box-shadow: 0px 3px 20px rgba(0, 0, 0, 0.05);
    background: linear-gradient(180deg, #ff8e8e 0%, #f62424 100%);
    right: 0;
    transform: translateX(50%);
    border-radius: 50%
}

БЛОГ НА HUSL

Как задвинуть элемент за поля документа?

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