html - CSS 倾斜图案重复 - 幻灯片菜单

Question

我正在使用 Elementor 为客户创建一个网站（我知道..），我创建了一个可以正常工作的滑动侧菜单，但是由于我创建的网站遵循一个倾斜的主题，我决定倾斜菜单区域（pop-向上）。

我的倾斜和动画工作正常，transform滑动动画（内置）的问题skew最初与变换重叠，但现在它工作正常。我遇到的问题是图案重复或穿过屏幕的另一侧（见图）。

有谁知道如何纠正这个？我试过隐藏overflow，background: no-repeat等等，没有任何工作..

@media only screen and (min-width: 1025px) {

.slide-menu {
     transform: skew(-10deg)
 }
 
.slide-menu .dialog-message, .slide-menu .dialog-close-button {
      transform: skew(10deg);
}

}

标签： htmlcsswordpresselementor