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

I've realised that I cannot simply assign a transform via css so I was wondering if there is any other way to achieve a skew-like effect on my scrollbar to match other elements of the site.

Here is an example of my main menu highlighting with a 15deg skew transform. I'm looking to create the same effect but on a vertical scrollbar:

Example of skew used in menu and other elements

Could this possibly be achieved with a pseudo element or background image?

Bakala
  • 407
  • 1
  • 6
  • 10
  • 1
    Please keep in mind that on Stack Overflow it's expected to show what you've tried yourself before asking. Your question should be: _"This is what I tried. It didn't work. Where did I go wrong?"_. It shouldn't be _"How do I..?"_. Simply because it usually requires writing half a book / tutorial to teach you. That being a said, a simple search on Google would've pointed you into the right direction: https://css-tricks.com/the-current-state-of-styling-scrollbars/ Search through that page and you'll find several options to get what you want :) – icecub May 16 '20 at 22:12
  • This may help you, no skew but much freedom in form yet: https://stackoverflow.com/questions/39571102/custom-scroll-bar-on-a-div-element-in-angular-2-0-cli-project/41018266 – Éric May 16 '20 at 22:18
  • @icecub Sorry, I assumed an explanation of my previous attempt would suffice. I have updated the original post to include the code I tried. – Bakala May 16 '20 at 22:33

1 Answers1

1

Multiple background can do this.

I considered 45deg to better see the result but you can adjust the angle like you want:

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

Another idea to make it works on both scrollbar but with no transparency

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
Temani Afif
  • 245,468
  • 26
  • 309
  • 415
  • We keep meeting, lol. Although this does work in Chrome, it doesn't work in FF for example. There's no cross browser support for this. You should probably mention that in your answer cuz in my screen, your answer doesn't do anything. This is also why I pointed OP to that website in the comments. There are some cross browser solutions available. – icecub May 16 '20 at 22:47
  • @icecub yes, it's known that Firefox doesn't yet implement such feature (https://stackoverflow.com/a/6165489/8620333) only webkit browser will show you a result – Temani Afif May 16 '20 at 22:50