Div with half circle in the midle - html

Question

I don't know if this is duplicated or not, but I searched but couldn't find anything.
I'm trying to do a div with a half circle in the middle of the top border like the picture bellow:
Th black square is a div (intended to be a modal) and in the middle the border is cut with a circle. The red part is the page background (can be anything... images, text...).
How can I do this in html/css? I'm trying to avoid images to do this!!
Thank you

Answer 1

You can try this...
body{
background-color:#333;
passing:0px;
height:0px;
}
#app{
background:#333 url('https://source.unsplash.com/random') no-repeat;
background-size:cover;
width:360px;
height:560px;
position:relative;
overflow:hidden;
}
.app-bar{
width:100%;
height:50px;
position:absolute;
bottom:0px;
left:0;
}
.app-bar .bar{
line-height:50px;
position:relative;
width:100%;
height:50px;
background-image: radial-gradient(circle 35px at 315px 0, transparent 700px, #f44336 50px);
}
.app-bar .bar i{
color:#FFF;
display:block;
line-height:50px;
float:left;
width:50px;
text-align:center;
cursor:pointer;
margin-top:0px;
}
.app-bar .bar i:hover{
background-color:rgba(0,0,0,.1);
}
.app-bar .bar button{
padding:0px;
box-sizing:border;
text-align:center;
margin:0px;
bordeR:0px;
outline:0px;
width:60px;
height:60px;
line-height:60px;
cursor:pointer;
color:#FFFFFF;
display:block;
border-radius:50%;
position:absolute;
top:-30px;
left:100%;
margin-left:-75px;
background-color:#f44336;
transition: all .2s ease;
}
.app-bar .bar button span{
line-height:60px;
font-size:30px;
}
.app-bar .bar button:hover{
transform:rotate(45deg);
transition: all .2s ease;
}
<div id="app">
<div class="app-bar">
<div class="bar">
<i class="material-icons">menu</i>
<i class="material-icons">search</i>
<button class="button">
<span class="material-icons">add</span>
</button>
</div>
</div>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/material-design-icons/3.0.1/iconfont/material-icons.min.css" >

Answer 2

One way of doing it:
* {margin: 0; padding: 0; box-sizing: border-box}
html, body {height: 100%}
body {
display: flex;
justify-content: center;
align-items: center;
background: #f00;
}
.black {
display: flex;
justify-content: center;
width: 200px;
height: 200px;
background: #000;
}
.white {
position: relative;
top: -25px;
width: 50px;
height: 50px;
border: 2px solid #f00;
border-radius: 50%;
background: #fff;
}
<div class="black">
<div class="white"></div>
</div>
And the "starter kit" solution you'd like to have:
* {margin: 0; padding: 0; box-sizing: border-box}
html, body {height: 100%}
body {
display: flex;
justify-content: center;
align-items: center;
background: linear-gradient(to bottom left, Navy, Tomato, Skyblue);
background-repeat: no-repeat;
background-attachment: fixed;
}
.outer {
display: flex;
flex-direction: column;
justify-content: space-evenly;
align-items: center;
width: 275px;
height: 550px;
background: linear-gradient(Navy 33.33%, Tomato 66.66%, Skyblue 100%);
box-shadow: 0 15px 15px #000;
}
.outer > span {color:#fff}
.outer > .inner {
display: flex;
flex-direction: column;
justify-content: space-evenly;
align-items: center;
position: relative;
padding-top: 20px;
width: 225px;
height: 275px;
border-radius: 5px;
background: #fff;
box-shadow: 0 10px 10px #000;
}
.outer > .inner > #user {
display: block;
position: absolute;
top: -35px;
width: 70px;
height: 70px;
border: 2px solid #fff;
border-radius: 50%;
background: Navy;
box-shadow: 0 0 0 10px Navy;
}
.outer > .inner > input[type=text],
.outer > .inner > #sign_in {
width: 80%;
padding: 5px;
}
.outer > .inner > #sign_in {
display: block;
padding: 10px 0;
color: #fff;
text-align: center;
text-decoration: none;
text-shadow: 1px 1px 1px #000;
background: Tomato;
box-shadow: 0 5px 5px #000;
}
<div class="outer">
<span>My Account</span>
<div class="inner">
<img src="http://www.ecovadis.com/wp-content/themes/ecovadis/images/Icon-user.png" alt="User" id="user">
<input type="text" placeholder="Username">
<input type="text" placeholder="Password">
Sign in
</div>
<span></span> <!-- just to make things easier -->
</div>
You can go on from here.

Answer 3

Thank you for all the help.
For my problem I found a solution in this post
here
and I adapted.
So for anyone that needs also the solution:
#wrapper {
width: 500px;
height:400px;
background: transparent;
border: 0;
/* Define half of half semi-cicle on the top for all */
background:
radial-gradient(circle at 0 100%, transparent 0, yellow 0) bottom left,
radial-gradient(circle at 100% 100%, transparent 0, yellow 0) bottom right,
radial-gradient(circle at 0 0, transparent 25%, yellow 15px) top right,
radial-gradient(circle at 100% 0, transparent 25%, yellow 15px) top left;
/*Define top half of half circle background for specific Safari 5.1- 6.0*/
background:
-webkit-radial-gradient(circle at 0 100%, transparent 0, yellow 0) bottom left,
-webkit-radial-gradient(circle at 100% 100%, transparent 0, yellow 0) bottom right,
-webkit-radial-gradient(circle at 0 0, transparent 25%, yellow 15px) top right,
-webkit-radial-gradient(circle at 100% 0, transparent 25%, yellow 15px) top left;
/*Define top half of half circle background for specific Opera 11.6-12.0*/
background:
-o-radial-gradient(circle at 0 100%, transparent 0, yellow 0) bottom left,
-o-radial-gradient(circle at 100% 100%, transparent 0, yellow 0) bottom right,
-o-radial-gradient(circle at 0 0, transparent 25%, yellow 15px) top right,
-o-radial-gradient(circle at 100% 0, transparent 25%, yellow 15px) top left;
/*Define top half of half circle background for specific Firefox 3.6-15*/
background:
-moz-radial-gradient(circle at 0 100%, transparent 0, yellow 0) bottom left,
-moz-radial-gradient(circle at 100% 100%, transparent 0, yellow 0) bottom right,
-moz-radial-gradient(circle at 0 0, transparent 25%, yellow 15px) top right,
-moz-radial-gradient(circle at 100% 0, transparent 25%, yellow 15px) top left;
/*repeat half of half circle*/
background-size: 51% 51%;
background-repeat: no-repeat;
border: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#content{
padding-top: 25%;
word-wrap: break-word;
}
<div id="wrapper" class="half-circle">
<div id="content">asdasdasdasdasdasdasdasdasdasdasdasdasdasdsdasdasdasdasdasdasdasdasdasdasdasdasdasdassdasdadasasdasdasdasdasd</div>
</div>