I would like to make a transparent cut out half circle shape using only CSS3. The only requirement is that all the elements that form the shape must
I needed rounded corners only on the bottom of a responsive image. I started from @sandeep fiddle and improved it for my needs:
.rect
{
height: 85vh;
position: relative;
background-color: red;
width: 60vw;
}
.circle-helper{
display: block;
width: 100%;
padding-bottom: 50%;
bottom: 0;
left: 0;
overflow: hidden;
position: absolute;
background-color: transparent;
}
.circle{
display: block;
width: 100%;
padding-bottom: 100%;
// height: 500px;
bottom: 0;
left: 0;
overflow: hidden;
position: absolute;
background-color: transparent;
}
.circle:after{
box-sizing: content-box;
content: '';
width: 100%;
height: 100%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
background: rgba(0,0,0,0);
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
border: 300px solid blue;
}
top: 50%
left: 50%
border: 300px solid blue
https://jsfiddle.net/mop00j22/
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" >