I have an application that has this design. The white sidebar should look exactly like in the pic which has an irregular shape. I need some CSS wizard to help me figure out how to make it happen.
1
Please add below code
<div class="container">
<div class="sidebar"></div>
<div class="content"></div>
</div>
CSS :-
.container {
display: flex;
height: 100vh;
}
.sidebar {
width: 300px;
background: white;
clip-path: path("M 0 0 H 300 V 600 C 150 600 150 400 300 400 V 0 H 0 Z");
z-index: 2;
}
.content {
flex-grow: 1;
background: #004d40;
padding: 20px;
}
1