не показывать горизонтальную полосу прокрутки

Question

Я пытаюсь получить форму трапеции. На моем сайте все в порядке. Я получил форму, но у меня странное поведение - горизонтальная полоса прокрутки:

Я знаю, откуда это взялось, когда я установил высоту div, которая будет трапецией

это мой код:

.trapezoid {
  clip-path: polygon(0 32%, 100% 0, 100% 100%, 0 70%);
  background-color: #33cccc;
  width: 100%;
  height: 50vh;
  position: relative;
  max-width: 95vw;
}

<div class="trapezoid">
  <div class="circle">

  </div>
</div>

Answer 1

Добавьте это к div, который делает горизонтальную прокрутку, или к телу:

overflow-x: hidden;

Подробнее здесь