如何倾斜滚动条？

Question

::-webkit-scrollbar-thumb {
    -webkit-transform: skewX(15deg);
    -moz-transform: skewX(15deg);
    transform: skewX(15deg);
}

我意识到我不能简单地通过CSS分配转换，所以我想知道是否还有其他方法可以在滚动条上实现类似偏斜的效果，以匹配网站的其他元素。

这是我的主菜单具有15度偏斜变换突出显示的示例。我希望在垂直滚动条上创建相同的效果：

这可以通过伪元素或背景图像来实现吗？

Answer 1

多个背景可以做到这一点。

我认为45deg可以更好地看到结果，但是您可以根据需要调整角度：

body {
  width:300vw;
}

::-webkit-scrollbar {
  width: 1em;
  height:1em;
}

::-webkit-scrollbar-thumb {
  background: 
    linear-gradient( 45deg, transparent 10px,orange 0) left,  /* 45deg */
    linear-gradient(-135deg,transparent 10px,orange 0) right; /* 45deg - 180deg */
  background-size:51% 100%;
  background-repeat:no-repeat;
}

some text

另一个使它在两个滚动条上都起作用但没有透明度的想法

body {
  width:300vw;
  height:300vh;
}

::-webkit-scrollbar {
  width: 1em;
  height:1em;
}

::-webkit-scrollbar-thumb {
  background: 
    linear-gradient(to top    right, #fff 49%,transparent 50%) bottom left,  
    linear-gradient(to bottom left , #fff 49%,transparent 50%) top    right,
    orange; 
  background-size:1em 1em;
  background-repeat:no-repeat;
}

some text