0

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.

enter image description here

Ranjank
  • 133
  • 1
  • 14
  • What is the expected use for this shape? The easy option is generally just use an image with transparency, but it depends what you're using it for. (e.g. is it purely graphical, or do you need to put stuff in it?) I'd probably use an image for a footer shape. – DBS Nov 25 '16 at 15:27
  • you can use border-radius on previous element http://codepen.io/anon/pen/NbgVZm – G-Cyrillus Nov 25 '16 at 15:38
  • [Download Inkscape](https://inkscape.org/en/download/) and have a play. Your shape should present no problem at all to implement in an svg. – enhzflep Nov 25 '16 at 15:39

2 Answers2

2

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>
  <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 100 100" preserveAspectRatio="none">
    <path d="M0 0 C 50 100 50 100 100 0 Z"></path>
  </svg>
</main>
<footer></footer>
Ricky Ruiz
  • 25,455
  • 6
  • 44
  • 53
1

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/

Marouen Mhiri
  • 1,640
  • 1
  • 14
  • 20
  • thanks , is it possible to render left over part i.e other than shape part to transparent? .wrapper:before background color to transparent without getting filled with .wrapper background color – Ranjank Nov 28 '16 at 11:45
  • sure but I background transparent won't change a lot instead of that use background-color:white (or whatever your background is) for the .wrapper:before (hier: https://jsfiddle.net/tbm2jgbk/1/) – Marouen Mhiri Nov 28 '16 at 21:16