How to create a curving sidebar?-CodePudding

I am trying to clip out a concave edge on the right side of a div (to make a curving sidebar, ultimately). I have struggled with CSS to make this happen and so far the closest I've gotten is using radial-gradient, like so

CodePudding user response：

You could try using clipping path and something like https://bennettfeely.com/clippy/ but I don't think it will work out how you want. Your best bet would probably be to create the image as a background then use display flex or fixed depending on how you want to use it. Or if you want the content to follow the shape maybe even a combination of the two, not sure how that would work out.

html, body {margin: 0; padding: 0;}
section {
  display: flex;
}

nav {
  height: 100vh;
  width: 20vw;
  background-image: url(https://i.postimg.cc/vHC8KpjC/test.png);
  background-size: 100% 100%;
}
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

<section>
  <nav>
    <ul>
      <li><a href="#">link</a></li>
      <li><a href="#">link</a></li>
      <li><a href="#">link</a></li>
      <li><a href="#">link</a></li>
      <li><a href="#">link</a></li>
    </ul>
  </nav>
  <main>Main content</main>
</section>

CodePudding user response：

The below code might helpful for your situation using background-image property.

div {
   height: 200px;
   width: 200px;
   background-color: green;
   background-image: radial-gradient(45% 75% at 100% 50%, red 75%, transparent 75%);
}

Also you can use clip-path property like below but the curvature might need more points to make like a perfect curve

clip-path: polygon(50% 0%, 100% 0, 84% 36%, 84% 65%, 100% 100%, 50% 100%, 0 100%, 0% 70%, 0% 35%, 0 0);

check the fiddle to see how it works