Q:

How can I create an element in HTML/CSS with a rectangle with a semicircle to the left side inside?

I want to create an element in HTML/CSS like this
I basically want to create a rectangle with a semicircle transparent inside
i'm currently use this class but doesnt work becouse On large screens lose shape
.half-negative-circle{    
    width:100%;    
    height:100%;    
    position:relative;    
    overflow:hidden;    
    z-index: 1 !important;    
}
.half-negative-circle:before{    
    content:'';    
    position:absolute;    
    right:70%;   
     width:55%;    
     height:100%;    
     border-radius:100%;   
      box-shadow: 300px 200px 100px 300px #0b77dc ;
    }

Any help on the best way to create this type of element would be greatly appreciated.
Thanks a lot in advance

A:

Easiest but a little crude method would be to use a background-image of the container, and then a dummy element with the same background image positioned to the right. The top-left and bottom-left border-radius can then be tweaked.
Example:

* { box-sizing: border-box; margin: 0; padding: 0; }
.banner {
  background-image: url(https://lorempixel.com/320/160/nature);
  background-repeat: no-repeat;
  background-position: center right;
  width: 320px; height: 160px;
  position: relative;
}
.caption {
  position: absolute; top: 0; left: 0;
  width: 70%; height: 100%; 
  color: #fff; font-size: 1.3em; font-family: sans-serif;
  padding: 8px; background-color: rgba(20, 120, 210, 0.8);
}
.dummy {
  position: absolute; top: 0; right: 0;
  width: 55%; height: 100%; 
  border-top-left-radius: 60% 70%;
  border-bottom-left-radius: 100% 100%;
  background-image: url(https://lorempixel.com/320/160/nature);
  background-repeat: no-repeat;
  background-position: center right;
}
<div class="banner">
  <div class="caption">Lorem Ipsum</div>
  <div class="dummy"></div>
</div>

