Div With Half Circle In The Midle

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 be

Solution 1:

You can try this...

body{
  
  background-color:#333;
  passing:0px;
  height:0px;
  
}
#app{
  background:#333url('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 315px0, transparent 700px, #f4433650px);
    
}


.app-bar.bari{
  color:#FFF;
  display:block;
  line-height:50px;
  float:left;
  width:50px;
  text-align:center;
  cursor:pointer;
  margin-top:0px;
}
.app-bar.bari:hover{
  background-color:rgba(0,0,0,.1);
}
.app-bar.barbutton{
  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.barbuttonspan{
  line-height:60px;
  font-size:30px;
  
}
.app-bar.barbutton:hover{
  transform:rotate(45deg);
  transition: all .2s ease;
}

<divid="app"><divclass="app-bar"><divclass="bar"><iclass="material-icons">menu</i><iclass="material-icons">search</i><buttonclass="button"><spanclass="material-icons">add</span></button></div></div><linkrel="stylesheet"type="text/css"href="https://cdnjs.cloudflare.com/ajax/libs/material-design-icons/3.0.1/iconfont/material-icons.min.css" >

Solution 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;
}

<divclass="black"><divclass="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: 015px15px#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: 010px10px#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: 00010px Navy;
}

.outer > .inner > input[type=text],
.outer > .inner > #sign_in {
  width: 80%;
  padding: 5px;
}

.outer > .inner > #sign_in {
  display: block;
  padding: 10px0;
  color: #fff;
  text-align: center;
  text-decoration: none;
  text-shadow: 1px1px1px#000;
  background: Tomato;
  box-shadow: 05px5px#000;
}

<divclass="outer"><span>My Account</span><divclass="inner"><imgsrc="http://www.ecovadis.com/wp-content/themes/ecovadis/images/Icon-user.png"alt="User"id="user"><inputtype="text"placeholder="Username"><inputtype="text"placeholder="Password"><ahref="#"id="sign_in">Sign in</a></div><span></span><!-- just to make things easier --></div>

You can go on from here.

Solution 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 0100%, transparent 0, yellow 0) bottom left,
		radial-gradient(circle at 100%100%, transparent 0, yellow 0) bottom right,
		radial-gradient(circle at 00, 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 0100%, transparent 0, yellow 0) bottom left,
		-webkit-radial-gradient(circle at 100%100%, transparent 0, yellow 0) bottom right,
		-webkit-radial-gradient(circle at 00, 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 0100%, transparent 0, yellow 0) bottom left,
		-o-radial-gradient(circle at 100%100%, transparent 0, yellow 0) bottom right,
		-o-radial-gradient(circle at 00, 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 0100%, transparent 0, yellow 0) bottom left,
		-moz-radial-gradient(circle at 100%100%, transparent 0, yellow 0) bottom right,
		-moz-radial-gradient(circle at 00, 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;
}

<divid="wrapper"class="half-circle"><divid="content">asdasdasdasdasdasdasdasdasdasdasdasdasdasdsdasdasdasdasdasdasdasdasdasdasdasdasdasdassdasdadasasdasdasdasdasd</div></div>