How to make rounded rectangle shape using css?-CodePudding

css which i have used to make. help for the same is highly appreciated

#rc-shape {
  border-radius: 50px / 15px;
  background: #73AD21;
  padding: 20px; 
  width: 200px;
  height: 150px; 
}

<div id="rc-shape"></div>

CodePudding user response：

You can do that using CSS Borders

.container {
  height: 200px;
}

.shape {
  border-radius: 81% 39% 38% 82% / 65% 67% 64% 64%;
  width: 505px;
  height: 250px;
  background: #75f;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  overflow: hidden;
}

.notch {
  border: 1px solid 3#75f;
  border-radius: 0% 100% 100% 0%;
  background: yellow;
  width: 50px;
  height: 50px;
}

<div class="container">
  <div class="shape">
    <div class="notch"></div>
  </div>
</div>

And i've used this site to do that...

tell me if its okay for you...

Edit: Added the Yellow notch too, check if its okay for you...

CodePudding user response：

You can use this site for creating border-radius. https://9elements.github.io/fancy-border-radius/

Or you can write your own like this.

#rc-shape {
  background: red;
  border-radius: 0 100px 100px 0; 
  padding: 20px; 
  width: 200px;
  height: 150px; 
}

<div id="rc-shape"></div>