How to make a vertical oval type of shape div?

Question

I want to create an oval shape like the one below but failing

Also is there any way to insert an image inside this oval shaped css? that's my main objective.

#oval {
  margin: 0px 0 10 02px;
  background: black;
  -moz-border-radius: 100px / 50px;
  -webkit-border-radius: 100px / 70px;
  border-radius: 50px / 50px;
  border-top-left-radius: 150px;
  border-top-right-radius: 150px;
  border-bottom-left-radius: 150px;
  border-bottom-right-radius: 150px;
  width: 80px;
  height: 100px;
}





  
  
  JS Bin

user_8620333 · Answer

You can consider SVG as mask and you can easily obtain this shape.

.box {
  width:300px;
  display:inline-block;
  background:url(https://picsum.photos/id/1074/800/800) center/cover;
  -webkit-mask:url("data:image/svg+xml;utf8,") 0 / 100% 100%;
          mask:url("data:image/svg+xml;utf8,") 0 / 100% 100%;
}
.box::before {
  content:"";
  display:block;
  padding-top:121%;
}

below the SVG I am using and if you want to edit it here is a good online tool where you simply need to append the path into the url to start editing: https://jxnblk.github.io/paths/?d=M0 39 C0 61 8 78 32 78 C56 78 64 61 64 39 C64 19 56 0 32 0 C8 0 0 19 0 39 Z

user_11151625 · Answer

Thanks @dgknca , using your clipreact i tried and adding with border-radius did the job , Update : Problem , the width and top height looks good but the top curve is litter flattened in my requirement image and this one is too oval from top any help ?

#oval {
  margin: 0px 0 10 02px;
  background: url("https://picsum.photos/536/354");
  -moz-border-radius: 100px / 50px;
  -webkit-border-radius: 100px / 70px;
  border-radius: 50px;
  clip-path: ellipse(50% 50% at 50% 50%);
  width: 82.4px;
  height: 100px;
}

How to make a vertical oval type of shape div?

2 Answers