SOURCE

select.onchange = function(){
            con.style.webkitMaskComposite = this.value
        }

<div class="content" id="con"></div>
    <div class="c">
        <div class="c1">source</div>
        <div class="c2">destination</div>
        <div class="sel">
            <label>-webkit-mask-composite</label>
            <select id="select">
                <option>unset</option>
                <option>clear</option>
                <option>copy</option>
                <option>source-over</option>
                <option>source-in</option>
                <option>source-out</option>
                <option>source-atop</option>
                <option>destination-over</option>
                <option>destination-in</option>
                <option>destination-out</option>
                <option>destination-atop</option>
                <option>xor</option>
            </select>
        </div>
    </div>

html{
  height:100%;
}
body{
  height:100%;
  display:flex;
  margin:0;
  justify-content: center;
  align-items: center;
}
.content {
  width: 300px;
  height: 150px;
  margin: auto;
  -webkit-mask: linear-gradient( red,red) 75px 0/100px 100px,linear-gradient( red,red) 125px 100%/100px 100px; 
  -webkit-mask-composite: source-in;
  -webkit-mask-repeat: no-repeat;
  background-color: cornflowerblue;
}
.c{
    position: absolute;
    margin: auto;
    width: 300px;
    height: 150px;
    pointer-events: none;
}
.c1,.c2{
    position: absolute;
    box-sizing: border-box;
    width: 100px;
    height: 100px;
    border: 1px dashed pink;
    display: flex;
    align-items: center;
    color: cornflowerblue;
    justify-content: center;
}
.c1{
    left: 75px;
    text-indent: -120px;
    box-shadow: 3px 3px 5px rgba(0,0,0,0.2)
}
.c2{
    right: 75px;
    bottom: 0;
    text-indent: 200px;
}
.sel{
    pointer-events: all;
    position: absolute;
    top: 0;
    transform: translateY(-100%);
    white-space: nowrap;
    padding: 10px;
    font-size: 16px;
}