Html 如何在CSS中创建倾斜过渡？

我试图使一个网站，有一个从一个部分到另一个倾斜的过渡。到目前为止，我已经能够使用

vh

创建一个临时解决方案。下面是它的外观：

但是，不仅div的HTML代码（下面是CSS）看起来不专业，而且滑动条也可见

<div id = "site">

    <div class = "slant"> </div>

    <div class = "stuff"> h </div>

</div>

如何改进我的过渡？我的意思是，我怎么能

隐藏滚动条

从左到右，我的元素是否完美契合？现在，在过渡段的左侧有一个小间隙，我想把它去掉

我希望这些元素可以作为以后更多文本的背景，这些文本将显示在转换上方

此外，除了使用“

99.6vw

”，还有谁知道更好的方法将元素的宽度拉伸到视图宽度？或者这种方法是首选做法？使用100vw可以获得滚动条，因此我将其略微减少到99.6。

正文{
保证金：0；
}
.暗{
最小高度：50vh；
位置：相对位置；
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
.黑暗{
背景色：暗灰色；
最小高度：计算（50vh+60px）；
}
.dark>div、.light>div{
字体大小：30px；
颜色：黑色；
字体系列：Arial，无衬线；
}
.光{
背景颜色：浅灰色；
}
.黑暗：：以前{
内容：''；
显示：块；
宽度：0；
身高：0；
位置：绝对位置；
底部：0；
边框底部：60px实心浅灰色；
左边框：calc（100vw-17px）实心透明；
}

内容1
内容2

您可以通过设置

溢出：隐藏来隐藏滚动条。尝试在
.stuff
上左：0

点一个

。此外，如果您提供完整的HTML和CSS，我们可以更好地帮助您。
.slant {

    border-bottom: 200px solid rgb(var(--grey));
    border-left:       99.6vw solid transparent;
    position:                          absolute;
    top:                                   65vh;

  }

.stuff {

    background: rgb(var(--grey));
    position: absolute;
    top: 85.5vh;
    width: 99.6vw;
    height: 100vh;

}