Как подправить стрелку в адаптиве?

Question

сейчас из-за нее прокрутка

и смотрится она странно( на десктопе цельная)

пробую прибить в правый край

.things__popup {
    position: absolute;
    opacity: 0;
    visibility: hidden;
    z-index: 4;
    top: 60px;
    right: 0;
    max-width: 264px;
    width: 100%;
    background-color: #fff;
    border-radius: 15px;
    filter: drop-shadow(0 0 1px #e9e8f4) drop-shadow(2px 2px 12px #ededed);
    padding: 32px 40px;
    padding-top: 25px;
}

.things__popup:after,
.things__popup:before {
    content: '';
    position: absolute;
    bottom: 100%;
    height: 20px;
    width: 40px;
}

.things__popup:before {
    right: 50%;
    background: 0 0/50px 50px radial-gradient(102px circle at left 5px top -30px, #fff0 calc(50% - 1px), #ffff 50%) no-repeat;
}

.things__popup:after {
    left: 50%;
    background: 100% 0/50px 50px radial-gradient(102px circle at right 5px top -30px, #fff0 calc(50% - 1px), #ffff 50%) no-repeat;
}

.things__popup--active {
    opacity: 1;
    visibility: visible;
}


@media screen and (max-width: 650px) {

.things__popup {
    top: 42px;
    right: 0px;
    max-width: 230px;
}

.things__popup:after,
.things__popup:before {
    width: 36px;
}

.things__popup:before {
    right: 8%;
}

.things__popup:after {
    left: 92%;
}

}

<div class="things__popup things__popup--active">
  <p class="things__ask"> ?</p>
  <div class="things__wrapper">
    <button class="things__elem things__elem--no">no</button>
    <button class="things__elem things__elem--yes">yes</button>
  </div>
</div>

Answer 1

Стрелку перенёс в отдельный span и уже его можна позиционировать до положения блоку .things__popup

.things__popup {
    position: absolute;
    opacity: 0;
    visibility: hidden;
    z-index: 4;
    top: 60px;
    right: 0;
    max-width: 264px;
    width: 100%;
    background-color: #fff;
    border-radius: 15px;
    filter: drop-shadow(0 0 1px #e9e8f4) drop-shadow(2px 2px 12px #ededed);
    padding: 32px 40px;
    padding-top: 25px;
}
.things__popup .things__popup__arrow{
position:absolute;
right:40px;
top:0;
}
.things__popup .things__popup__arrow:after,
.things__popup .things__popup__arrow:before {
    content: '';
    position: absolute;
    bottom: 100%;
    height: 20px;
    width: 40px;
}

.things__popup .things__popup__arrow:before {
    right: 50%;
    background: 0 0/50px 50px radial-gradient(102px circle at left 5px top -30px, #fff0 calc(50% - 1px), #ffff 50%) no-repeat;
}

.things__popup .things__popup__arrow:after {
    left: 50%;
    background: 100% 0/50px 50px radial-gradient(102px circle at right 5px top -30px, #fff0 calc(50% - 1px), #ffff 50%) no-repeat;
}

.things__popup--active {
    opacity: 1;
    visibility: visible;
}


@media screen and (max-width: 650px) {

.things__popup {
    top: 42px;
    right: 0px;
    max-width: 230px;
}

}

<div class="things__popup things__popup--active">
  <p class="things__ask"> ?</p>
  <span class="things__popup__arrow"></span>
  <div class="things__wrapper">
    <button class="things__elem things__elem--no">no</button>
    <button class="things__elem things__elem--yes">yes</button>
  </div>
</div>

БЛОГ НА HUSL

Как подправить стрелку в адаптиве?

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