Search code examples
htmlcssshapescss-shapes

How do I make this shape in HTML?

I'm trying to make this shape in HTML/CSS, and I can't do it for the life of me. If anyone can give a heads-up, it would be much appreciated. Including JS also doesn't matter. If you can give the smallest nudge in the right direction, I would be grateful. Thanks, here's the drawing.

Shape

Solution

  • I used vh and % units to make it responsive.Just a small code and responsive as well.

    This will work for u.

    * {
  margin: 0px;
  padding: 0px;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
}

div {
  position: relative;
  display: flex;
  justify-content: center;
  margin-top: 10%;
  padding-top: 40%;
  width: 40%;
  background: black;
  border-radius: 14% 14% 0 0;
}

p {
  display: block;
  content: "";
  position: absolute;
  width: 10%;
  padding-top: 10%;
  margin-top: -28%;
  background: black;
  border-radius: 50%;
}
    <div></div>
<p></p>