search

Home  >  Q&A  >  body text

Div with transparent semicircle cutout

I want to make a transparent cut out semicircle shape using only CSS3. The only requirement is that all elements that form the shape must be black or transparent .

I cannot use a black rectangle with a white circle on it because the semicircle must be transparent and let the background show through.

Required shape:

P粉022285768P粉022285768476 days ago821

reply all(2)I'll reply

  • P粉138871485

    P粉1388714852023-10-23 14:34:32

    You can use a box shadow to make a transparent clipping circle :

    body {
      background: url(http://i.imgur.com/qi5FGET.jpg) no-repeat;
      background-size: cover;
    }
    div {
      display: inline-block;
      width: 300px; height: 300px;
      position: relative;
      overflow: hidden;
    }
    div:before {
      content: '';
      position: absolute;
      bottom: 50%;
      width: 100%; height: 100%;
      border-radius: 100%;
      box-shadow: 0px 300px 0px 300px #000;
    }
    .transparent {
      opacity: 0.5;
    }

    This can be responsive with a percentage length:

    body {
      background: url(http://lorempixel.com/output/people-q-c-640-480-1.jpg) no-repeat;
      background-size: cover;
    }
    div {
      width: 40%; height: 300px;
      position: relative;
      overflow: hidden;
    }
    div:before {
      content: '';
      position: absolute;
      bottom: 50%;
      width: 100%; height: 100%;
      border-radius: 100%;
      box-shadow: 0px 300px 0px 300px #000;
    }
    .transparent {
      opacity: 0.5;
    }

    reply
    0
  • P粉851401475

    P粉8514014752023-10-23 09:09:07

    Maybe you can do this using the CSS ::after pseudo-property like this:

    body {
      background: green;
    }
    
    .rect {
      height: 100px;
      width: 100px;
      background: rgba(0, 0, 0, 0.5);
      position: relative;
      margin-top: 100px;
      margin-left: 100px;
    }
    
    .circle {
      display: block;
      width: 100px;
      height: 50px;
      top: -50px;
      left: 0;
      overflow: hidden;
      position: absolute;
    }
    
    .circle::after {
      content: '';
      width: 100px;
      height: 100px;
      -moz-border-radius: 100px;
      -webkit-border-radius: 100px;
      border-radius: 100px;
      background: rgba(0, 0, 0, 0);
      position: absolute;
      top: -100px;
      left: -40px;
      border: 40px solid rgba(0, 0, 0, 0.5);
    }
     

    reply
    0
  • Cancelreply