How to create a concave 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：

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

CodePudding user response：

Hello to make a concave side of a div, yes, you can do it using gradient, of course the div will still be square or rectangular. Look at the following example, it is based on this post Border corner shape scoop doesn't work

div {
  height: 200px;
  width: 200px;
  background-color: green;
  background: -webkit-radial-gradient(
      100% 50%,
      circle,
      transparent 45%,
      steelblue 15%
    )
    no-repeat;
  background-position: 0px, 0px;
}

<div>
</div>

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>