Transparent half circle cut out of a div

前端 未结 8 2308
一生所求
一生所求 2020-11-22 05:34

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

相关标签:
8条回答
  • 2020-11-22 05:54

    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/

    0 讨论(0)
  • 2020-11-22 06:02

    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" >

    0 讨论(0)
提交回复
热议问题