html - 防止水平滚动条出现

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;

See more here