Search code examples
csscss-shapes

How can i add a custom curved shape inside a sidebar using CSS?

body{
    font-family: roboto;

}
*{
    margin: 0;
    padding: 0;
    list-style: none;
    text-decoration: none;
}


.sidebar{
    
    position: fixed;
    left: 0px;
    width: 314px;
    height: 100vh;
    background-color: #002438;
    box-shadow: hsl(0, 0%, 60%) 7px 2px 15px;
    
    
}
.sidebar header{
    
    font-size: 50px;
    margin-top: -7%;
    padding-top: 50px;
    padding-bottom: 50px;
    text-align: center;
    line-height: 20px;
    color: #002438;
    font-weight: 1000;
    line-height: 30px;
    
    background-color:  rgb(255, 255, 255, 90%);

    border-bottom-left-radius: 200px;
    border-bottom-right-radius: 200px;
    
}
.sidebar ul a{

    display: block;
    line-height: 60px;
    font-size: 24px;
    color: white;
    text-align: center;
    padding-top: 25px;
}
.sidelist :hover{
    color: rgb(24, 234, 253);

}
.sidelist{
    padding-top: 50px;
}
.sidebar header span{
    font-size: 25px;
    font-weight: 400;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Lead Manager</title>
    <link rel="stylesheet" href="style.css">
    
</head>
<body>
    
    <div class="wrapper">
        <div class="sidebar">
            <header>LEAD <br> <span>MANAGER</span></header>
                
                
            <ul class="sidelist">
                <li><a href="#">DASHBOARD</a></li>
                <li><a href="#">CUSTOMER</a></li>
                <li><a href="#">LEADS</a></li>
                <li><a href="#">REPORTS</a></li>
                <li><a href="#">SMS</a></li>
                <li><a href="#">PROFILE</a></li>
            </ul>
            
                
        </div>
        <div class="maskbg"></div>
        <div class="shapemask"></div>
    </div>
    
</body>
</html>

This is the shape i want to create inside the sidebar

Curved sidebar shape CSS

The sidebar is inside a wrapper. I created a simple div also inside the wrapper, but when I give height , width and color to the custom shape, it doesn't show up. The side bar is fixed to the left. I tried looking it up the internet and saw clipping mask mentioned. I put side bar inside a wrapper to see if i can flex it, so that the right side of the side bar is another div which can be used as container for everything else in that page. that is also not working since it doesnt show any error for html and css.

Please note that shapemask and maskbg class is added because i tried to do clipping mask, but in the end I cant even see the simple shape formed out of the div.

Solution

  • Two radial-gradient can do it:

    .box {
  width:250px;
  height:400px;
  background: 
    radial-gradient(100% 150% at top,              #002438 50%,transparent 50.2%),
    radial-gradient(100% 180% at top, #a1abb0 48% ,#7f868b 50%,transparent 50.2%),
    #ced0d2;
  background-size:400% 300px;
  background-position:1% 0;
  background-repeat:no-repeat;
}
    <div class="box"></div>