How to create a concave curving sidebar?

Question

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.

I got quite close by wrapping the rest of the content in a div with border-radius-top-left and border-radius-bottom-left, creating the illusion of a curving sidebar:

.contentMask {
  margin-left: 12%;
  border-top-left-radius: 12% 50%;
  border-bottom-left-radius: 11% 47%;
}

The result, however, does not follow a curve in the manner i desire - it's more like an ellipse with a very flat edge. I can't get it right. Is there a way to create a sidebar like this, following an arc I can define?

Edit for posterity: I got a bit closer to what I wanted by an additional hack. I made the content taller than the screen with extra vertical space, then used negative top margin to scroll it back into place. Then I made the outer container of the whole thing height: 100vh and overflow: hidden, thus allowing me to basically clip off part of the curve and achieve the arc I wanted. Only problem now is I can't really add box-shadow this way.

Can you share the inspiration of what ur trying to achieve ? — prograk, Jan 23 '22 at 01:58
I've created a sandbox https://codesandbox.io/s/crimson-bash-8qv4r?file=/index.html is this what ur looking for ? — prograk, Jan 23 '22 at 02:46
https://stackoverflow.com/questions/23984497/border-corner-shape-scoop-doesnt-work this answer your question — Usiel, Jan 23 '22 at 03:02
@prograk thank you but no that still has a gradient - it doesn't really look anything like the picture I have in the post. Sorry!! — temporary_user_name, Jan 23 '22 at 03:21
@Usiel no those are just the corners - not the sides. I haven't been able to find a way to use that technique to make a sidebar like the one I have pictured. If you know how, make a fiddle and post it as an answer! — temporary_user_name, Jan 23 '22 at 03:21
you want svg morph in curve shape like awwwards websites? if yes i can help you — MAGGIx1404, Jan 23 '22 at 05:55

score 0 · Answer 1 · answered Jan 23 '22 at 04:16

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

score 0 · Answer 2 · answered Jan 23 '22 at 17:02

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>

score -1 · Answer 3 · answered Jan 23 '22 at 04:09

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>

Now I understand what is he looking for – prograk Jan 23 '22 at 04:12 — prograk, Jan 23 '22 at 04:12

How to create a concave curving sidebar?

3 Answers3