Diptox Diptox - 7 months ago 15
HTML Question

CSS How to generate this Shape on a Div or on Canvas

i have been trying for like 3 hours to make this shape enter image description here

on a div using css

Canvas drawing is accepted , but Css is prefered

Thanks guys :D

Answer

It would be useful to know what kind of shape that is. I am using a squeezed circle cut in half for my solution.

This was kind of fun.

#box {
  width:300px;
  height:50px;
  background:black;
  overflow:hidden;
}

#box::before{
  content:'';
  display:block;
  width:300px;
  height:300px;
  background:white;
  border-radius:10000px;
  transform-origin:top left;
  transform:scaleY(.1);
  position:relative;
  top:-15px;
}
<div id="box">
</div>

Comments