How To Draw Rectangle With One Side Curved In Html

Is it possible to draw rectangle with top side curved in html? Shape should be shown on bottom of the html page as it requires for footer.

Solution 1:

You could use an SVG that serves as a separator.

body {
  margin: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
}
main {
  flex: 3;
  background-color: purple;
  fill: purple;  /* Color svg separator will inherit from */position: relative;
}
svg {
  width: 100%;
  height: 50px;
  position: absolute;
  top: 100%;
  fill: inherit;
}
footer {
  flex: 1;
  padding-top: 50px;  /* svg separator height */background-color: gold;
}

<main><svgxmlns="http://www.w3.org/2000/svg"version="1.1"viewBox="0 0 100 100"preserveAspectRatio="none"><pathd="M0 0 C 50 100 50 100 100 0 Z"></path></svg></main><footer></footer>

Solution 2:

try this: this should show the first steps only :-)

.wrapper {
  width: 500px;
  height: 200px;
  border: 1px solid black;
  border-top: none;
  position: relative;
  overflow: hidden;
  z-index: 1;
}

.wrapper:before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 80%;
  border: 1px solid black;
  left: 0;
  top: -50%;
  z-index: 2;
}

you can play around with top(%) and the radius to fit your needs hier is the fiddle: https://jsfiddle.net/tbm2jgbk/