| <!DOCTYPE html> |
| <style> |
| div { |
| position: absolute; |
| } |
| /* Hide the scrollbar and scroll corner of #resize to show the resizer only. */ |
| #resize::-webkit-scrollbar { |
| width: 20px; |
| height: 20px; |
| opacity: 0; |
| } |
| #resize::-webkit-scrollbar-corner { |
| opacity: 0; |
| } |
| </style> |
| <div style="width: 100px; height: 100px"> |
| <!-- matches the horizontal scrollbar --> |
| <div style="width: 20px; height: 100px; right: 0; top: 0; background: blue"></div> |
| <!-- matches the vertical scrollbar --> |
| <div style="width: 100px; height: 20px; left: 0; bottom: 0; background: blue"></div> |
| <!-- matches the scroll corner --> |
| <div style="width: 20px; height: 20px; right: 0; bottom: 0; background: yellow"></div> |
| <!-- matches the horizontal scrollbar thumb --> |
| <div style="width: 20px; height: 20px; left: 0; bottom: 0; background: green"></div> |
| <!-- matches the vertical scrollbar thumb --> |
| <div style="width: 20px; height: 40px; top: 0; right: 0; background: green"></div> |
| <!-- matches the resizer --> |
| <div id="resize" style="width: 100px; height: 100px; left: 0; top: 0; resize: both; overflow: scroll"></div> |
| </div> |
