防止显示水平滚动条

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