Div with half circle in the midle

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">
    <a href="#" id="sign_in">Sign in</a>
  </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>