Search code examples
htmlcsscss-shapes

How to make a vertical oval type of shape div?


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.

My Demo

#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;
}
<!DOCTYPE html>
<html>

<head>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
  <meta charset=utf-8 />
  <title>JS Bin</title>
</head>

<body>
  <div id="oval_parent">
    <div id="oval"></div>
  </div>
</body>

</html>

example


Solution

  • 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,<svg xmlns='http://www.w3.org/2000/svg'  viewBox='0 0 64 78' ><path 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' /></svg>") 0 / 100% 100%;
              mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'  viewBox='0 0 64 78' ><path 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' /></svg>") 0 / 100% 100%;
    }
    .box::before {
      content:"";
      display:block;
      padding-top:121%;
    }
    <div class="box"></div>
    
    <div class="box" style="width:150px;"></div>

    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

    <svg
      xmlns='http://www.w3.org/2000/svg'
      viewBox='0 0 64 78'
      width='100' >
      <path 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' />
    </svg>