Can someone help me out making such a cut out from div?
Found possible solution,but dont have knowledge in SVG.Maybe someone can help me out.
HTML:
<svg viewBox="0 0 400 150">
<path opacity="0.6" fill="red" d="M0,10 Q0,0 10,0 Q195,40 390,0 Q400,0 400,10 Q390,75 400,140 Q400,150 390,150 Q195,100 10,150 Q0,150 0,140 Q10,75 0,10" />
</svg>
CSS:
svg {
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
body {
overflow-x: hidden
}
svg {
left: 47%;
position: relative;
top: -24%;
transform: translate(-50%, -50%);
width: 2000px;
}
Try it:-
#oval_parent{
background:black;
width:200px;
height:120px;
overflow:hidden;
}
#oval{
width: 220px;
height: 100px;
margin:10px 0 0 -10px;
background: white;
-moz-border-radius: 100px / 50px;
-webkit-border-radius: 100px / 50px;
border-radius: 100px / 50px;
}<div id="oval_parent">
<div id="oval"></div>
</div>The easiest way of doing this is create a div right after the navigation and make curved png with Photoshop and apply it as background to that div. So in that way you have rectangle navigation and div with curved background after navigation.
.nav-bot{
background: url(https://s23.postimg.org/jakqjag8r/nav_bot.png);
background-size: 100% 100%;
background-repeat: no-repeat;
width: 100%;
height: 20px;
}
Here is example fiddle.
EDIT
If you don't want to use image there is another way to do this Using css gradient and box-shadow.
.nav-bot{
background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0) 50%);
width: 104%;
margin-left: -2%;
height: 50px;
border-radius: 50%;
margin-top: -19px;
-webkit-box-shadow: 0px 6px 15px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 6px 15px 0px rgba(0,0,0,0.75);
box-shadow: inset 1px 3px 5px 0px rgba(0,0,0,0.75);
}
Here is example for that.
Hope this helps you.
Html:
<div class="oval"></div>
css:
.oval { width: 100px; height: 50px; border-radius: 50%; background: red; overflow: hidden;}
The trick is to have one side bigger than the other. Overflow hidden to cut out the background stuff if you use an image.
Change the width and height depending on the direction of the oval.
Here's a JSfiddle:
