-1

I'm trying to create a shape like this below in css but I'm unable to create it. I've tried using clip path property to generate similar but as you know it's very jagged and not smooth. I was wondering if it's possible to create this using css or not? and if not what should be the correct way to create this?

Image

amit.s19
  • 193
  • 10

1 Answers1

1

You might be able to get closer to what you're looking for by messing around with div border-radius values according to this ::before technique.

Here is the result of the below code

    <div class="container">
         <div class="left"></div>
         <div class="center"></div>
         <div class="right"></div>
    </div>

   .container {
      display: flex;
    }
    .container div {
      height: 260px;
      width: 50px;
    }
    .center {
      position: relative;
      top: 10px;
      background-color: black;
      width: 55px !important;
      height: 250px !important;
    }
    .left::before {
      display: block;
      position: relative;
      content: "";
      width: 100%;
      height: 100%;
      background-color: black;
      border-radius: 0.8em 0.8em 0 0.8em;
    }
    .center::before {
      display: block;
      position: relative;
      content: "";
      width: 100%;
      height: 10%;
      background-color: white;
      border-radius: 0 0 40em 40em;
    }
    .right::before {
      display: block;
      position: relative;
      content: "";
      width: 100%;
      height: 100%;
      background-color: black;
      border-radius: 0.8em 0.8em 0.8em 0;
    }
dejmedus
  • 41
  • 5