I am trying to create a stylish slanted sidebar that aligns perfectly with the red section of my webpage, without overlapping into the blue area. Can anyone guide me on how to achieve this?
Even though my current code doesn't seem to work here, it functions well on platforms like W3Schools. Here is a snippet of the code I have been working on:
html {
scroll-behavior: smooth;
}
main {
width: 100%;
height: 100%;
}
article {
width: 100%;
height: 100%;
}
body {
height: 100%;
width: 100%;
margin: 0;
}
.sideBox {
position: relative;
height: 200%;
overflow: hidden;
width: 20%;
background-color: white;
transform: rotate(-20deg)
}<!--Font-->
<link href="https://fonts.googleapis.com/css?family=Turret+Road:800&display=swap" rel="stylesheet">
<main style="background-color:red; ">
<div class="sideBox">
</div>
</main>
<article style="background-color:blue"></article>